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Sobre o Livro 


O JSF é uma tecnologia muito útil e prática de ser aplicada, mas que diversas vezes é 
mal utilizada. Muitas vezes por falta de conhecimento de quem estrutura aaplicagäo, 
o projeto acaba ficando lento e de difícil manutenção. 

Este livro tem por objetivo dar dicas e explicar conceitos que são necessários para 
que uma boa aplicação utilizando JSF seja criada. Às vezes o mínimo detalhe que vai 
desde como chamar um método ou passar um valor para um ManagedBean ou até 
mesmo utilizar um converter pode levar a horas perdidas de pesquisas na internet e 
testes na aplicação. 

Esse livro demonstrará boas práticas, dicas e a correta utilização do JSF em di- 
versos aspectos e diferentes situações. 


Casa do Cédigo 


Sumario 





Sumario 


1 Escolhas que afetam o desenvolvimento da aplicação 


11 Suspeite se a aplicação está usando bem o JSF ........... 


12 Devo seguir todas as dicas ao pé da letra? ............. 


Use os escopos corretamente 

2 @RequestScoped para escopos curtos 

3 Mantenha o bean na sessão com @SessionScoped 

4 Entenda o novo @ViewScoped 

5 Crie escopos longos e customizáveis com @ConversationScoped 
6 A praticidade do escopo @Dependent 

7 Guarde dados para toda a aplicação com o @ApplicationScoped 
8 Quando usar o @NoneScoped? 


9 Exibindo Objetos e Mensagens após Redirect e o FlashScoped 


Cuidados com seus Managed Beans 
10 Colocando lógica de rendered no MB 


1 Inicializando Objetos 


11 


17 


23 


27 


33 


37 


43 


45 


49 


Sumario Casa do Cédigo 





12 Injetando ManagedBeans 
13 Target Unreachable: Enfrente a NullPointerException do JSF 


14 Cuidado com o “Value is not valid” 


Front-ends JSF 

15 Utilizar JSP ou xhtml? 

16 Utilizando imagens/css/javascript de modos simples 
17 Boa utilização do Facelets 


18 Enviar valores para o ManagedBean 
18.1 Envie valor como parámetro pelo f:setPropertyActionListener .... 
18.2 Envie valor como parâmetro .......o.o..o.ooo 000020 eee 


18.3 Envie valor por Binding . 444.4 <5 cos 84 casera ES 
19 Temas dinámicos 


20 O que eu uso? Action ou ActionListener? 
20.1 Redirecione o usuário com action ..................... 


20.2 Trate eventos com actionListener . .. .. sa ooa eaa 


Aproveite as bibliotecas de componentes 


21 Primefaces 
21.1 DataTable com seleção com um click ................... 
212 Drag and Drop se soa aia oe aan Ghee 
213: NOUACAdOE sece eB Awe a EE ADE ee eee ae E 
21:4 Auto Complete. . Le hu. oh ek wah er ee 
DES POM Ss Soma adie cee ee ee E RG Ses eet acer IR ee 8 


516 Considerações Malo... ba ae ad Bae ad 
22 Temas Dinámicos com Primefaces 


viii 


55 
59 


63 


65 
67 
71 
75 


81 
82 
83 
83 


85 


87 
87 
88 


91 


111 





Casa do Cédigo Sumário 
23 Componentes do Primefaces não Aparecem 117 
24 Richfaces 119 
24.1 DataTable com Colunas Congeladas......... 2.2.2222. 119 
A oc 4 pas ne A ee So DU Bo ees 122 
243 LOG. sio em segs en ae en nen 125 
244 Panel Menu css Gas Gh oS A ee ea 126 
DAs KEP au focando a Gite: doe I Bhs Gree ldo GO en Ge oe ee ee 128 
24.6 Considerações Finais ........ o... es 129 
25 Icefaces 131 
SM ICRU duo ae he te Swe A ee a a det Se Bs 131 
254 DOE + ner 4 66S RHEE ES ACER ES 4D ERASE Ae 134 
ae PVG ie ch rs Ge ade tae! e Ok gas Aue’ ao Gee Cn er is 136 
o A E O Ca EDUC aere 137 
25.5 Considerações Finais «c serde eanet o ect a ee aes 139 
26 Fvite misturar as Implementações/Bibliotecas de Componentes 141 
27 Não faça paginação no lado do servidor 143 
Funcionalidades ricas com JSF, segurança e otimização do JSF 155 
28 Facilitando o uso do Ajax 157 
28.1 Sempre indique que a requisição está acontecendo ........... 160 
28.2 Dê mensagens de feedback para o usuário ..... 2.222220. 161 
28.3 Previna-se das várias ações do usuário em requisições assincronas . . 162 
28.4 Cuidado ao usar ManagedBeans RequestScoped com Ajax ...... 163 
29 Internacionalização e Localização da sua aplicação 165 
29.1 Permita que o usuário mude o idioma .................. 167 
30 Utilizando recursos dentro de um Converter 173 


30.1 Acesse um ManagedBean programaticamente através de Expression 


Language . oos suak as ee a ee ee e ee a 


Sumário Casa do Código 





31 CDI com JSF 175 
32 Evite o “Cross Site Scripting” em seu sistema 177 
33 Otimizando a navegação e performance 179 
Debug e inspeção de aplicações 181 
34 Limpeza de comentários e debug 183 

341 Escanda os comentários dapágiha ~ soe sec cs eiis ooo... 183 

342 Debug dos: componentes «ssa ss sds ade sa a edian tawa 184 
35 Organize funcionalidades por ambiente do projeto 187 
36 Refresh automático dos Arquivos 191 

Versão: 16.4.2 


CAPÍTULO 1 


Escolhas que afetam o 
desenvolvimento da aplicacáo 


Vocé já sentiu um desánimo por ter que alterar uma funcionalidade? Ou ter que 
procurar por aquele bug que esta aparecendo há meses? Muitas vezes esse desánimo 
pode acontecer por decisões erradas durante a criação da aplicação. A pior parte é 
saber que ao alterar um trecho do código, podemos ter efeitos colaterais indesejados 
em outros locais. 

É possível encontrar diversos problemas técnicos ou até mesmo conceituais por 
escolhas erradas ao iniciar o desenvolvimento de uma nova aplicação. É necessário 
estruturá-la com conhecimento das ferramentas utilizadas; uma aplicação que tem 


frameworks mal utilizados será refém deles para sempre. 


1.1. Suspeite se a aplicação está usando bem o JSF Casa do Código 





1.1 SUSPEITE SE A APLICAÇÃO ESTÁ USANDO BEM O JSF 


Certa vez me foi dada a trivial tarefa de mudar uma aba de lugar. A tarefa era apenas 
pegar uma aba que estava entre outras e exibi-la primeiro. 


Carros Pessoa Casa 


Dados dos carros 


Figura 1.1: Exibir primeiro a aba Pessoa 


A figura 1.1 mostra como era o layout e como, teoricamente, seria simples passar 
aaba Pessoa para ser exibida antes da aba Carro. 

O que seria uma tarefa de 15 minutos se transformou em uma caça as bruxas de 
3 dias. Ao alterar as abas de posição, diversos erros começaram a acontecer. O pri- 





meiro erro que apareceu foi o cruel NullPointerException. Como um desen- 





volvedor poderia imaginar que, ao alterar uma aba de lugar, esse erro iria aparecer? 

O principal problema dessa aplicação eram os escopos dos ManagedBeans. To- 
dos eram SessionScoped e dependiam de informacóes em comum. Ao entrar 
na primeira aba ( Carro), diversos dados eram armazenados na sessáo e utiliza- 
dos em outras abas diretamente no ManagedBean que cuidava da aba Carro. Ao 
trocar as abas de lugar, diversas informagöes nao foram preenchidas nesse Mana- 
gedBean e quando o ManagedBean da aba Pessoa fosse acessar essas informações, a 








NullPointerException aparecia. 

Infelizmente esse era um dos problemas da aplicação; outro era que ao carre- 
gar a tela todas as informagöes de todas as outras abas eram carregadas. Era muita 
informação em memória, e erros começavam a acontecer sem explicação. 

As vezes a escolha é feita pelos desenvolvedores, outras vezes por algum desen- 
volvedor que fala: “assim sempre funcionou e vamos continuar desse modo”. É pre- 
ciso entender o framework com o qual estamos trabalhando, para só entáo apresentar 
argumentos e melhores técnicas na criagäo da aplicagäo. 


1.2 DEVO SEGUIR TODAS AS DICAS AO PÉ DA LETRA? 


Náo. Vocé deve manter seu espirito crítico. O livro vai abrir sua mente para que vocé 
evite cair em armadilhas já tradicionais, mas há sim situações em que você acaba 
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subvertendo o framework. 


Parte I 


Use os escopos corretamente 


O JSF é um framework que tem um comportamento “component-based”. Ele 
tem por característica principal o fato de que a página irá buscar a informação no 
ManagedBean. 

Cada ManagedBean tem um tipo de escopo ideal para cada situagäo. É fácil en- 
contrar apologias ao uso indiscriminado do SessionScoped, assim como a defesa 
acirrada de que o ideal para todos os casos é o RequestScoped. Vamos analisar 
cada caso e ver qual a melhor solução para cada abordagem. 

Antes é importante salientar os dois modos de se declarar um ManagedBean. É 
possivel utilizar um ManagedBean por CDI que utiliza o pacote javax.inject ou 
por ManagedBean encontrado no pacote javax.faces.bean. Existe diferença 
entre cada contexto que for utilizado e ambos com vantagens e desvantagens. Por- 


tanto, é importante conhecer os escopos para conseguir usá-los corretamente. 


CAPÍTULO 2 


@RequestScoped para escopos 
curtos 


O escopo Request Scoped funciona como um simples HTTP request. O Mana- 
gedBean náo manterá seu estado entre as chamadas do usuário. 
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RequestScoped MB 





Figura 2.1: RequestScoped ManagedBean tratando requisigäo 


A imagem 2.1 mostra como o JSF irá tratar a requisição ao se utilizar um Mana- 
gedBean RequestScoped: 


1) O usuário iniciará uma requisição; 
2) O ManagedBean processará as informagöes necessárias; 
3) Asinformacóes do ManagedBean ficam disponíveis para o processamento da tela; 


4) Caso algum valor tenha sido armazenado no ManagedBean, essas informagöes 
seráo descartadas; 


A cada requisigáo, uma nova instáncia do ManagedBean será criada e usada, 
dessa maneira, não há o compartilhamento das informações do ManagedBean entre 
as requisições. 


import javax.faces.bean.*; 


@ManagedBean 

@RequestScoped 

public class RequestScopedMB { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 
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public void setNumeroDeAcessos(int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 


Ao analisarmos o código da classe RequestScopedMB é possível ver que, 
mesmo a classe tendo o atributo privado numeroDeAcessos, o seu valor será sem- 





pre igual a cada chamada. Note que no método getNumeroDeAcessos, 0 valor 
do numeroDeAcessos é alterado. Náo importa quantas vezes a página seja apre- 
sentada ao usuário, o valor retornado será sempre um. 





BOA PRÁTICA 


Os ManagedBeans por padrão são @RequestScoped e com 
isso, a anotação pode ser omitida na declaração dos beans. Consi- 
dere como boa prática sempre deixar seu ManagedBean anotado com 
@Request Scoped, pois com ela fica claro para quem lê o código qual 
é o escopo do ManagedBean, mesmo para um desenvolvedor que acaba 
de entrar no projeto e ainda nao conhece o JSF. 











O melhor uso de um ManagedBean no escopo de request é em telas que náo 
necessitam de chamada AJAX, ou em de algum objeto salvo na memória. 

Considere uma situação na qual não é necessário nenhuma informação adicional 
de um objeto em memória. Basta enviar os dados presentes do formulário que um 


objeto será criado e estará pronto para ser persistido no banco de dados. 
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Incluir Profissional 





* Nome: Pedreiro de Software 


Marretar senhas no código fonte 





Descrição: Internacionalização, só os fracos usam 


EJB é para os marrentos, prefiro enums 





v Confirmar o Cancelar 


Figura 2.2: Utilizando o RequestScoped de um bom modo 


A figura 2.2 mostra um exemplo de quando poderíamos utilizar um Managed- 
Bean @RequestScoped. Note que a figura 2.2 trata de uma tela de inclusão de 
dados, e não necessário nenhum dado já processado anteriormente. 

Um ManagedBean do tipo RequestScoped é considerado ThreadSafe, ou seja, 
ele não terá problemas relacionados a vários usuários acessando o mesmo MB ao 
mesmo tempo. É uma boa utilização na geração de relatório, pois não haveriam 
duas pessoas usando a mesma instância do ManagedBean e o relatório teria como 
ter inconsistência de dados. Outra boa utilização seria ao enviar dados para uma 
outra tela; essa outra poderia exibir todos os dados do objeto presente no request. 
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CAPITULO 3 


Mantenha o bean na sessao com 
@SessionScoped 


Os ManagedBeans @SessionScoped tém o mesmo comportamento da sessáo web 
(HttpSession). Todo atributo de um ManagedBean SessionScoped terá seu valor 
mantido até o fim da sessáo do usuário. 
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SessionScoped MB 


£ 
Figura 3.1: SessionScoped ManagedBean tratando requisição 


A imagem 3.1 mostra como o JSF irá tratar a requisição ao se utilizar um Mana- 
gedBean SessionScoped: 


1) O usuário iniciará uma requisição; 
2) O ManagedBean processará as informações necessárias; 
3) As informações do ManagedBean ficam disponíveis para o processamento da tela; 


4) Toda informação que foi atribuída ao ManagedBean será mantida enquanto durar 


a sessão do usuário no servidor. 


Todo valor que for alterado em um ManagedBean SessionScoped será mantido, 


e todos os valores desse bean serão mantidos na memória. 


import javax.faces.bean.*; 


@ManagedBean 

@SessionScoped 

public class SessionScopedMB { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 


public void setNumeroDeAcessos(int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 
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public boolean isAdministrador (){ 
return usuario.getPerfil().equals(Perfil.ADMINISTRADOR) ; 


No código da classe SessionScopedMB o valor de numeroDeAcessos será 
alterado a cada requisicäo do usuario, e um novo valor será exibido para ele a cada 
exibição da página. 

O tipo SessionScoped está disponível tanto para ManagedBean do pacote 
javax. faces. bean como para os ManagedBeans que utilizam CDI. 

A melhor utilização para um ManagedBean SessionScoped é para armazenar 
dados relativos ao usuário. Esses dados devem servir para facilitar o acesso às in- 
formações do usuário ou até mesmo trabalhar “regras de view”, ou seja, regras que 


definirão o que um usuário pode visualizar ou acessar, entre outras funcionalidades. 


// imports omitidos 
@ManagedBean 

@SessionScoped 

public class UsuarioLoginMB { 


private Usuario usuario; 
private String localeUsuario = "pt_BR"; 


public void logout() throws ServletException, IOException { 
HttpSession session = // busca a session 


session. invalidate(); 


// efetua redirect 


public boolean isAdministrador (){ 
return usuario.getPerfil() .equals(Perfil.ADMINISTRADOR) ; 


// gets e sets omitidos 
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No código da classe UsuarioMB, é possivel ver qual seria uma boa utilizacao 
para uma ManagedBean SessionScoped. Métodos e atributos poderiam ser adicio- 
nados/removidos para facilitar o acesso aos dados do usuário, por exemplo, um mé- 
todo para verificar os papéis do usuário no próprio ManagedBean para diminuir o 
caminho da EL. Ao invés de: ${usuarioMB.usuario.administrador} basta- 
ria fazer S (usuarioMB.administrador) e no próprio ManagedBean seria feito 
todo o tratamento dos dados. 

O problema do SessionScoped é que ele é muito fácil de usar. Se um desenvol- 
vedor precisar enviar valor de uma tela para outra, o modo mais fácil de fazer seria 
salvar esse valor em um ManagedBean do tipo SessionScoped; mas ao mesmo tempo 
que ele é o mais fácil é também o mais perigoso. 

E preciso ter em mente que sempre que um valor é atribuído a um SessionS- 
coped, ele permanecerá na memoria. Se o servidor tiver mil usuários ativos e cada 
instáncia de UsuarioMB tiver pelo menos uma lista de carros que contenham 1000 
itens... Bom, aí é possível perceber como o uso da memória do servidor comegaria a 
aumentar. 

Quando o SessionScoped é muito utilizado, podemos ter ManagedBeans que 
utilizam informagöes de outros ManagedBeans, sendo que todos esses valores estáo 
salvos na sessáo. Imagine os ManagedBeans CarroMB, PessoaMBe CasaMB. Caso 
PessoaMB remova o carro do CarroMB ea CasaMB esteja precisando desse valor, 








já é possivel sentir o cheiro de NullPointerException... 

O SessionScoped é um escopo muito útil, mas pode causar diversos problemas 
e dor de cabeca se mal utilizado. 

É necessário bastante cuidado ao usá-lo, ainda mais em telas de listagens e ca- 
dastro. Caso o usuário abra o navegador na tela de BairrosMB, e depois acabe 
abrindo uma aba nova no mesmo navegador apontando para a tela da BairrosMB. 
A alteracáo realizada em uma aba, pode interferir no funcionamento da outra. 
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* Nome: ¡Asa Norte2 


px AR 








Figura 3.2: Aba 1 


* Nome: |Asa Norte 
* Cidade: |Blandia - Bahia mu. 











Figura 3.3: Aba 2 


É possível perceber que nas imagens 3.2 e 3.3 que se o usuário confirmar a al- 
teração da Aba 2 e depois confirmar a alteração da Aba 1, alguma informação será 
perdida. 

O SessionScoped é muito útil, mas se mal utilizado pode causar sérios pro- 
blemas á aplicacáo. 
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CAPITULO 4 


Entenda o novo @ViewScoped 


O ManagedBean ViewScoped é um tipo de escopo que se encontra entre o SessionS- 
coped e o RequestScoped. Ele tem a característica de existir na memória enquanto 
o usuário permanecer na página exibida. Veja as imagens 4.1 e 4.2 para entender 


melhor o funcionamento desse escopo. 
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Player: 30 
Player: 31 
Player: 32 
Player: 33 
Player: 34 
Player: 35 
Player: 36 
Player: 37 
Player: 38 
Player: 39 






































Figura 4.1: ViewScoped com DataTable 


36 
Name: Player: 35 
Age: 35 





Figura 4.2: ViewScoped com DataTable 


Se o usuario abrir uma tela com um dataTable, o ManagedBean com os dados 
permanecerá vivo e pronto para exibir as informações a qualquer chamada reali- 
zada. Uma vez que o usuario mude de página, o ManagedBean será descartado pelo 
servidor. 
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ES) I 





ViewScoped MB 





Figura 4.3: ViewScoped ManagedBean tratando requisição 


A imagem 4.3 mostra como o JSF irá tratar a requisição ao se utilizar um Mana- 
gedBean ViewScoped: 


1) O usuário iniciará uma requisição; 
2) O ManagedBean processará as informações necessárias; 
3) As informações do ManagedBean ficam disponíveis para o processamento da tela; 


4) O ManagedBean manterá os dados caso o usuário permaneça na página ou na- 
vegará para outra página e os dados em memória serão descartados. 


@ManagedBean 

@ViewScoped 

public class ViewScopedMB implements Serializable { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 


public void setNumeroDeAcessos(int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 


public String somar() { 
numeroDeAcessos++; 
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return null; 


No exemplo da classe ViewScopedMB, o valor do numeroDeAcessos perma- 
necerá na memória enquanto o usuário permanecer na página. Note que o método 
somar retorna null, isso faz com que a agäo redirecione para a propria página e 
como o bean é ViewScoped, manterá na memória os seus valores. 

É preciso ter em mente que os dados permaneceráo “vivos” no ManagedBean 
quando os métodos executados retornarem null ou sejam void, dessa forma, 
indicando que devam permanecer na mesma tela. Qualquer navegagäo para outra 
página, ou até mesmo um método retornando o endereço da página atual causará a 
perda dos dados do ManagedBean. 

Um bom uso para um ManagedBean do tipo ViewScoped é em uma página com 
diversas chamadas Ajax. Imagine um h:dataTable sendo exibido e diversos dia- 
logs para exibir informagöes de registros relacionados ao dataTable. Desse modo 
as informacóes estariam na memoria e nao haveria a necessidade de voltar ao banco 
de dados a cada chamada. 

Atente-se a um problema que pode ocorrer com relação a acesso de diversos 
usuários ao banco de dados. Veja novamente a imagem 4.1 e note uma coisa: o valor 
que está sendo exibido está armazenado em memoria. Imagine que um usuario altere 
os dados do Player 35 no banco de dados. Nesse caso, se um outro usuário estivesse 
com essa tela aberta a mais tempo, ele náo veria essa alteracáo. 

No caso de uma tela com edição o problema seria maior ainda. Veja as imagens 
4.4 € 4.5 para entender como o problema pode se agravar. 
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Player: 75 


Figura 4.4: Edicäo com ViewScoped 








Minhoca 


a 


Figura 4.5: Edigáo com ViewScoped 
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Imagine que o usuário Astrogildo abriu a tela de edição 4.4 e foi ao banheiro. 
Enquanto isso a usuária Antonieta, por meio do seu PC, entrou no mesmo registro, 
alterou e persistiu a alteração no banco de dados 4.5. O que aconteceria, ao retornar 
do banheiro, se Astrogildo apertasse o botão Alterar? Toda a alteração realizada pela 
Antonieta seria perdida. 

Para evitar o problema de dados fora de sincronia com o banco de dados, uma 
rotina de atualização poderia ser executada. A cada 1 minuto uma verificação pode- 
ria ser realizada, ou talvez antes de exibir cada registro. Uma outra abordagem seria 
adotar algum mecanismo ou Framework para tomar conta dessa falta de sincronia. 
O JPA conta com a opção de verificar se o objeto foi alterado por outra pessoa, desse 
modo, quando Astrogildo apertasse o botão Alterar uma mensagem de erro seria 
exibida. 


22 


CAPITULO 5 


Crie escopos longos e customizaveis 
com @ConversationScoped 


O ManagedBean do tipo Conversat ionScoped tem um funcionamento parecido 
como ViewScoped. A característica principal do ConversationScoped é que 
o controle da existéncia do ManagedBean é feito manualmente. 
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Figura 5.1: ConversationScoped ManagedBean tratando requisigáo 


A imagem 5.1 mostra como o JSF tratará a requisigäo ao se utilizar um Managed- 


Bean ConversationScoped: 


1) O usuario inicia uma requisigäo; 

2) O ManagedBean processará as informagöes necessárias; 

3) Asinformacóes do ManagedBean ficam disponíveis para o processamento da tela; 
4) Enquanto o ManagedBean náo for finalizado, os dados seráo mantidos; 


5) Uma vez que o comando para finalizar o ManagedBean for executado, seus dados 
seráo eliminados da memória. 


O ConversationScoped tem seu tempo de vida definido programaticamente, 
ele funciona basicamente como uma transação de banco de dados. Para iniciar seu 
ciclo de vida é necessário um comando de início, da mesma forma que para encerrar 
o escopo é necessário um comando que identifique o fim. 

Para um ManagedBean do tipo ConversationScoped funcionar correta- 
mente ele deve seguir algumas normas: 


e Como só pode ser utilizado com CDI, o arquivo beans.xml deve existir 
dentro da pasta WEB- INF; 








e Utilizaraanotação javax.enterprise.context.ConversationScoped 
na classe; 
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* Injetar um objeto do tipo javax.enterprise.context.Conversation; 





e Chamar os métodos conversation.begin() e conversation.end() 


para iniciar e finalizar o escopo do ManagedBean. 


// imports omitidos 

ONamed 

@ConversationScoped 

public class ConversationScopedMB implements Serializable { 
@Inject 
private Conversation conversation; 


private int numeroDeAcessos; 


public String iniciar(){ 
conversation. begin(); 
return null; 


public boolean isTransient(){ 
return conversation.isTransient() ; 


public String somar(){ 
if (!conversation.isTransient()){ 
numeroDeAcessos++; 


return null; 


public String finalizar Ot 
conversation.end(); 
return 
"/paginas/parte2/conversationScoped.xhtml?faces-redirect=true"; 


public String navegar () 4 
if (conversation. isTransient ()){ 
return null; 
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return 
"/paginas/parte2/conversationScoped2.xhtml?faces-redirect=true"; 
pag P P 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 


public void setNumeroDeAcessos(int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 


No código da classe Conversat ionScopedMB tem um método para abrir e fi- 





nalizar a conversação do ManagedBean, nesse caso iniciare finalizar, respec- 
tivamente. É necessário sempre se lembrar do escopo, ou entáo recursos poderáo 
ficar alocados na memoria desnecessariamente. 

Na classe Conversat ionScopedMB, é possível ver que realizamos uma nave- 
gação e mantivemos o escopo vivo. A navegação deve começar de dentro do Mana- 
gedBean, por exemplo, através do método navegar, porque assim os dados per- 
maneceráo na memória. 

O ManagedBean do tipo ConversationScoped tem apenas dois estados, 
transiente long running. O estado será transient antes do início e após o 
fim da conversação. 

O ConversationScoped é ideal para ser utilizado em uma tela na qual 
existe um h:dataTable com muitas chamadas ajax e os dados devem 
ser mantidos até uma determinada invocação. Outra vantagem em utilizar o 
ConversationScoped é manter um objeto vivo entre diversas telas: a navegação 
entre telas não eliminará objetos da memória, diferentemente do ViewScoped. 

O ConversationScoped só pode ser utilizado com CDI. Não existe essa op- 
ção para os ManagedBeans do pacote javax. faces.bean. Caso a sessão do usuá- 
rio termine, o ManagedBean do tipo ConversationScoped será eliminado da 
sessão. 
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CAPÍTULO 6 


A praticidade do escopo 
@Dependent 


O escopo Dependent tem como característica não ter um comportamento próprio, 
mas sim herdar o comportamento de outro ManagedBean em que for injetado. 


//Imports omitidos 

@Named 

@Dependent 

public class DependentScopedMB implements Serializable { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 


return ++numeroDeAcessos; 


public void setNumeroDeAcessos (int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 
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Esse é o escopo padráo ao se usar JSF com CDI. Nao é necessário utilizar a ano- 
tação @Dependent na classe. 

Quando o @Dependent é utilizado diretamente em uma página, cada 
EL resultará na criação de um ManagedBean novo. Caso uma página conte- 
nha #{dependentScopedMB.total} #{dependentScopedMB.total} será 
impresso 11. Em geral o escopo Dependent é injetado dentro de outros 
ManagedBeans, desse modo ele herdara o escopo da classe principal. Se o 
Dependent ScopedMB fosse injetado no SessionScopedMB, seu escopo também 
seria de sessáo. 


// imports omitidos 
public class MeuMB4 
@Inject 
private DependentScopedMB dependent ; 


public void encaminharRequisicao(){ 
int tempoSessao = dependent .buscarConfiguracao("tempoSessao") ; 


// outros metodos omitidos 





BOA PRATICA 


Considero como boa prática sempre deixar anotado com 
@Dependent. Por mais que algumas pessoas da equipe possam 
saber que o valor padráo é esse, com o passar do tempo haverá pessoas 
que talvez nao saibam disso. Com o valor @Dependent fica claro para 
quem lé o código qual é o escopo do ManagedBean. 











Tome bastante cuidado ao injetar um Dependent ManagedBean dentro de um 
ApplicationScoped. Essaabordagem pode levar ao problema de Memory Leak. 
Após um método utilizar um ManagedBean do tipo Dependent ele náo é total- 
mente descartado, mantendo uma referéncia para o ApplicationScoped. Seo 
mesmo método for chamado novamente, outra referéncia será criada para ser utili- 
zada e assim em diante. 
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CAPITULO 7 


Guarde dados para toda a aplicacáo 
com o EApplicationScoped 


O ApplicationScoped ManagedBean tem o comportamento semelhante ao do 
padráo de projeto Singleton, mantendo uma única instáncia de determinado bean na 
memória. 
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© 9 


ApplicationScoped MB 


Figura 7.1: ApplicationScoped ManagedBean tratando requisição 


A imagem 7.1 mostra como o JSF tratará a requisição ao se utilizar um Managed- 
Bean ApplicationScoped: 


1) O usuário iniciará uma requisição; 
2) O ManagedBean processará as informagöes necessárias; 
3) Asinformacóes do ManagedBean ficam disponíveis para o processamento da tela; 


4) O mesmo ManagedBean responderá a outros requests de usuários, dessa forma, 
náo haverá distingáo de qual usuário poderá ou náo ter acesso ao dados do Ma- 
nagedBean. 


Note que náo existe individualidade quando se fala de ApplicationScoped. 
No caso de um ManagedBean ApplicationScoped, todo usuario tera acesso a 
mesma instância. Seria uma prática muito errada salvar alguma informação em um 
ApplicationScoped que pertencesse somente a um determinado usuario. 

O tipo ApplicationScoped esta disponivel tanto para ManagedBean do pa- 
cote javax.faces.bean como para os ManagedBeans que utilizem CDI. 

A melhor utilização parao Applicat ionScoped seria para conter valores uti- 
lizados por toda a aplicação. 
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@ManagedBean 

@ApplicationScoped 

public class ApplicationScopedMB implements Serializable { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 


public void setNumeroDeAcessos(int numeroDeAcessos) { 
this.numeroDeAcessos = numeroDeAcessos; 


A classe ApplicationScopedMB mostra como utilizar o 
ApplicationScoped. Todos os usuarios do sistema que acessarem esse 
ManagedBean verao o contador aumentar. Esse tipo de escopo é ideal para conter 
valores como configuração, ou objetos caros de se criar e que devem ser instanciados 
apenas uma vez. 

Uma outra observação importante sobre o ApplicationScoped é que as vezes 
se faz necessário que ele seja iniciado antes de todos ManagedBeans. Isso é possível 





através da configuracáo: @ManagedBean (eager = true). Com essa configura- 
cáo um ApplicationScoped ManagedBean será iniciado antes que qualquer tela da 
aplicação seja acessada. 

Esse configuração é bastante útil quando já queremos alguma informação carre- 
gada em memória antes que seja solicitada pelo usuário. Imagine que um cache de 
Cidades seja feito: se não usasse o eager, o cache se faria apenas quando o valor fosse 
solicitado pela primeira vez, causando demora na chegada da informação. 

Outra aplicação para a opção eager=true é caso um ApplicationScoped Ma- 
nagedBean seja injetado dentro de outro ManagedBean. Pode acontecer que o JSF 
ainda não tenha inicializado o ApplicationScoped e os valores estejam nulos. 
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CAPÍTULO 8 


Quando usar o @NoneScoped? 


O NoneScoped ManagedBean tem por caracteristica servir apenas a uma chamada 
da EL e depois ser eliminado da memória. Veja que sua utilização difere do Re- 
questScoped quanto a duração das informações. O RequestScoped dura por quan- 
tas chamadas de EL forem realizadas durante uma requisição. O NoneScoped será 
eliminado após uma chamada de EL. 


Casa do Código 








NoneScoped MB 





Figura 8.1: NoneScoped Scoped ManagedBean tratando requisicäo 


A imagem 8.1 mostra como o JSF tratará a requisicáo ao se utilizar um Mana- 
gedBean NoneScoped: 


1) O usuario iniciará uma requisigäo 
2) O ManagedBean processará as informagöes necessárias 
3) As informações do ManagedBean ficam disponíveis para o processamento da tela 


4) O mesmo ManagedBean não responderá a outras chamadas. Ele será descartado 
após receber uma chamada. 


É necessário entender que esse escopo tem por característica ser altamente des- 
cartável. 


// imports omitidos 

@ManagedBean 

@NoneScoped 

public class NoneScopedMB { 
private int numeroDeAcessos; 


public int getNumeroDeAcessos() { 
return ++numeroDeAcessos; 


public void setNumeroDeAcessos(int numeroDeAcessos) { 
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this.numeroDeAcessos = numeroDeAcessos; 


Se o NoneScopedMB fosse utilizado da seguinte forma de uma EL, como: 


#{noneScopedMB.numeroDeAcessos} #{noneScopedMB .numeroDeAcessos} 


O valor impresso seria 1 1.O NoneScoped atenderia apenas a uma chamada 
do EL e depois deixaria de existir. 

A melhor utilizacáo para o NoneScoped seria para tarefas pontuais, como forma- 
tar um campo, exibir hora ou realizar um cálculo. Outro bom uso seria para acessar 
propriedades do faces-config.xml. 

O NoneScoped ManagedBean está disponivel através do pacote 


javax.faces.bean. 


35 


CAPITULO 9 


Exibindo Objetos e Mensagens após 
Redirect e o FlashScoped 


No projeto de exemplo do livro, é possível encontrar uma tela de cadastro como na 
imagem 9.1. 


Cadastre uma Cidade: 
Nome itaoca da Pedra 


Estado Espirito Santo 


Cadastrar 


Figura 9.1: Cadastro de cidade 


Cadastros de dados na aplicacäo costumam vir com alguma mensagem indica- 
tiva para o usuário de que aquele registro foi salvo no banco de dados com sucesso. 
O problema acontece quando, após realizar a persisténcia com sucesso, nenhuma 


mensagem é exibida ao usuário, algo como na imagem 9.2. 
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Dados que chegaram: 
Cidade - Nome: 
Cidade - Estado: 


Figura 9.2: Nao exibe dados após uma agäo 


// finalizando cadastro 
super.exibirMensagemParaUsuario(FacesMessage.SEVERITY_INFO, 
"Nome da cidade cadastrada: " + cidade.getNome()); 


return "/cadastroComSucesso.xhtml?faces-redirect=true"; 


Mesmo adicionando a mensagem para ser exibida ao usuário, como no código 
visto, a mensagem náo é exibida e os dados da cidade recém cadastrada náo chegam 
na próxima tela. Isso acontece por um pequeno detalhe, o redirect. 


Muitos desenvolvedores percebem que, ao realizar um redirect, informações que 
deveriam ser exibidas na tela náo aparecem, como se tivessem sido perdidas. Na 
verdade, € um comportamento esperado essas informagöes se perderem, mas para 
entendermos a razáo precisamos compreender o impacto em se utilizar um redirect. 


Veja na figura 9.3 como funciona o redirect: 


© 
1 ManagedBean 
— ~ p 


2 


Browser do Usuário — p4 Nova tela 





Figura 9.3: Como funciona o SendRedirect 


Conseguimos então perceber que: 
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1) O usuario enviará um request ao ManagedBean; 


2) Ao executar o comando SendRedirect, o ManagedBean envia para o browser 
do usuário uma URL com um novo destino (esse valor irá em um %header do 


request); 


3) O browser do usuário analisará o response e fará uma nova chamada para a URL 
que recebeu; 


4) A nova tela será exibida ao usuário. 


Quando o ManagedBean redireciona o usuário para uma nova tela, todos os da- 
dos do request original se perdem. Dados enviados no form, mensagens para serem 
exibidas ao usuário e outros valores se perderáo. 

Para ajudar o desenvolvedor a tratar esse comportamento foi criado o chamado 
FlashScope. Ao utilizar o FlashScope para manter os objetos na memória, o 
próprio JSF manterá o objeto na memória até que ele seja utilizado. Veja o código da 
classe SendRedirectMB que mostra quando o problema poderá acontecer. 


@ManagedBean 
@RequestScoped 
public class SendRedirectMB extends AbstractMB{ 


private int valorParaExibir; 
private static final String URL = "URL PARA PAGINA"; 


public int getValorParaExibir() { 
return valorParaExibir; 


# 


public void setValorParaExibir(int valorParaExibir) { 
this.valorParaExibir = valorParakxibir; 


public String redirecionarSemFlash() { 
super.exibirInformacao("Valor Enviado é de: " + valorParaExibir) ; 
return URL + "?faces-redirect=true"; 


} 


public String redirecionarComFlash() { 
super.exibirInformacao("Valor Enviado é de: " + valorParaExibir) ; 
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FacesContext instance = FacesContext.getCurrentInstance() ; 
ExternalContext externalContext = instance.getExternalContext () ; 
externalContext.getFlash().put("valorParaExibir", valorParaExibir) ; 
externalContext.getFlash() .setKeepMessages (true); 

return URL + "?faces-redirect=true"; 


Uma vez que o método redirecionarSemFlash for executado, to- 
dos os dados presentes no request original seráo perdidos. O método 
super .exibirInformacao nada mais faz do que exibir uma mensagem para o 
usuário que pode ser visualizada com um h:messages. 

Para exibir um objeto ou um atributo após um SendRedirect basta 
fazer como no método redirecionarComFlash. Basta utilizar o FlashS- 





cope externalContext.getFlash().put ("valorParaExibir", 





valorParaExibir) ; para armazenar o valor como se fosse um mapa; esse mapa 
armazenará o valor até o final do redirecionamento. Para exibir esse valor na outra 





tela, basta fazer: <h:outputText value="#{flash.valorParakxibir}” 
/>. Após o valor ser acessado no FlashScope ele será eliminado da memória. É possi- 
vel também manter o objeto na sessão, basta acessar o objeto por <h: output Text 





value="#{flash.keep.valorParaExibir}” />. 

Para exibir uma mensagem para o usuário existem diferentes manei- 
ras: duas fáceis e uma mais complexa. Apös inserir a mensagem no con- 
texto para exibi-la para o usuário, basta executar o seguinte comando: 





externalContext .getFlash() .setKeepMessages (true). Desse modo 
a mensagem será exibida para o usuário após ser redirecionado. O outro 
modo de exibir a mensagem é adicionar a tag a seguir na página: <c:set 


target="#{flash}” property="keepMessages” value="true” />. 





Desse modo a mensagem sera salva no flash e exibida ao usuario. O ultimo modo 
envolve criar um PhaseListener que faca o trabalho manual de persistir o valor 
na sessão e depois remover; para maiores informações dessa abordagem visite o 
link: http://uaihebert.com/?p=499 . 

Veja na imagem 9.4 os dados sendo exibidos após utilizar as técnicas apresenta- 
das aqui. 
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e Nome da cidade cadastrada: Itaoca da Pedra 


Dados que chegaram: 
Cidade - Nome: Itaoca da Pedra 
Cidade - Estado: Espírito Santo 


Figura 9.4: Cadastro de cidade 
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Parte II 


Cuidados com seus Managed 
Beans 


Todo desenvolvedor precisa ter bastante cuidado ao adicionar códigos que li- 
dam com a lógica de visualização da sua aplicação, como definições de “o que pode 
ser exibido para determinado usuário?”, “como exibir determinada informagäo para 
perfis diferentes de visualizagöes”. 

Um código criado sem pensar em boas práticas pode levar a sérios problemas 
de manutengäo, acabamos por ter classes grandes e complexas, e muitas fungöes e 
códigos repetidos. 

Cito aqui a teoria da janela quebrada apresentada pelos cientistas James Q. Wil- 
son e George L. Kelling. Imagine um prédio com janelas quebradas. Se essas janelas 
náo forem rapidamente reparadas, a chance de vándalos quebrarem mais janelas au- 
mentam. Do mesmo modo é possível acontecer com sistemas. Basta que o primeiro 
código feio seja adicionado ao projeto, que aumentará a chance de um segundo có- 
digo feio aparecer e assim por diante. 


CAPITULO 10 


Colocando lógica de rendered no 
MB 


Considere o código de um panel, no qual existe uma lógica para determinar se ele 
será exibido ou náo: 


<h1>Relatório de Salários</h1> 
<h:panelGrid columns="2" 
rendered="#{relatorioMB.usuario.papel eq 'ADM'}" > 
<h:outputText value="Salário do Funcionário:" /> 
<h:outputText value="#{funcionario.salario}" /> 
</h:panelGrid> 


O trecho de um relatório de salários poderia claramente exemplificar essa situ- 
acáo. O código do Relatório de Salários é simples e fácil de entender, nele 
existe apenas a lógica para ver se o usuário é ou náo administrador. Caso o usuário 
seja um administrador, entáo será mostrado o salário do funcionário. 
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Uma primeira boa prática seria aplicar o principio Tell, don't ask (“Diga, nao 
pergunte”). Essa prática diz que é melhor deixar que o próprio objeto diga se ele pode 
ou não fazer tal ação e não outro objeto calcular essa ação por ele. Veja o código da 
classe Usuario, que mostra como ficaria um método aplicando esse principio. 


public enum Papel 4 
ADM, GERENTE, USUARIO_SIMPLES; 


public class Usuario { 
private String login; 
private String email; 
private Papel papel; 


public boolean isAdm() 4 
return Papel .ADM.equals (papel); 


public boolean isGerente() 4 
return Papel .GERENTE.equals (papel); 


public boolean isUsuarioSimples() { 
return Papel.USUARIO_SIMPLES.equals(papel); 


// getters e setters omitidos 


Note que a classe Usuario informa qual o papel do usuario. A vanta- 
gem dessa abordagem é que caso a cláusula rendered="#{usuario.papel 











eq 'ADM'}” passasse para rendered="#{usuario.papel eq 'ADM'and 





usuario.dataAdmissao > '10-10-2000'}” bastaria alterar na classe 
Usuario que todas as ELs que utilizassem o novo método não precisariam ser 
alteradas. Veja como ficará o código alterado do relatório. 


<hi>Relatorio de Salários</h1> 

<h:panelGrid columns="2" rendered="#{relatorioMB.usuario.adm}" > 
<h:outputText value="Salário do Funcionario:" /> 
<h:outputText value="#{funcionario.salario}" /> 

</h:panelGrid> 
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Note que náo importa quantas vezes a regra para calcular se o usuário é um 
administrador mude, isso náo aferá mais a EL. Independente de quantas vezes a EL 
for utilizada uma alteração na regra não seria necessária uma alteração nas páginas. 

Ainda assim é possível notar que esse código pode ser melhorado. Imagine que 
agora para ver o salário do funcionário, além de ser administrador o usuário precisa 
ser do RH. Seria bem simples alterar o relatório e adaptar essa regra. 


<n1>Relatório de Salários</h1> 
<!-- relMB foi reduzido de relatorioMB para melhor visualização --> 
<h:panelGrid rendered="#{relMB.usuario.rh and relMB.usuario.adm}" > 
<h:outputText value="Salário do Funcionário:" /> 
<h:outputText value="#{funcionario.salario}" /> 
</h:panelGrid> 


Realmente o código esta simples e legível, mas imagine se esse mesmo IF está 
repetido 40x por essa pagina, e talvez até em outras paginas. 

E agora que entra a triste realidade do desenvolvedor, aquele tragico momento 
em que percebemos que sera necessário vasculhar cada página e ver onde essa regra 
foi aplicada. E a pior parte é que talvez a condigäo rendered esteja assim: 


rendered="#{relatorioMB.usuario.rh and relatorioMB.usuario.adm}" 
ou 

rendered="#{relatorioMB.usuario.adm and relatorioMB.usuario.rh}" 
ou 

rendered="#{rel.user.adm and rel.user.rh}" 


Essa variacäo poderia causar a impossibilidade de usar uma pesquisa para loca- 
lizar o que necessitaria de alteração. 

Existe mais uma abordagem simples que ajudará a evitar muita dor de cabeca, 
basta isolar essas regras em algum lugar, como o ManagedBean. Náo é necessário 
mágica, nem um conhecimento profundo em arquitetura para aplicar essa simples 
abordagem. 





A tag rendered ficaria assim rendered="#{relatorioMB.usuarioPodeVerSalario}” 








Note que a partir de agora quem está tomando conta dessa regra de view é o próprio 
ManagedBean. É ele quem dirá se o usuário poderá ver ou náo o relatório. Esse 
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método poderia ser replicado por milhares de vezes que, caso a regra mudasse, náo 
haveria impacto nas páginas. 


public boolean isUsuarioPodeVerSalario(){ 
return usuario.isADM() && usuario.isRH(); 


O método isUsuarioPodeVerSalario mostra exatamente a vantagem da 
abordagem de centralizar as regras de view em um ManagedBean. Caso 0 método 
fosse utilizado em 30 validacóes diferentes, nao haveria problema algum se a regra 
alterasse. 
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CAPÍTULO 11 


Inicializando Objetos 


Quando estamos implementando os Managed Beans do projeto, precisamos tomar 
bastante cuidado com a inicialização dos seus atributos, pois algumas armadilhas 
podem nos esperar. No código a seguir, inicializamos a lista de carros no construtor, 
mas será que essa é a melhor prática? 


@ManagedBean 
public class InicializandoMB{ 
private List<Carro> carros; 


@EJB 
private CarroDAO carroDAO; 


public InicializandoMB(){ 
carros = carroDAQ.listAl1l(); 
} 


// getters e setters omitidos 
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Usamos um EJB no construtor da classe para buscar no banco de dados uma lista 
de Carro. No entanto, a injeção de dependências acontece apenas após a invocação 
do construtor. Nesse caso, receberemos uma NullPointerException, pois o EJB 








ainda não estará injetado e pronto para ser invocado. 

Um modo de evitar todos os problemas listados acima seria inicializar os atribu- 
tos em um método anotado com javax.annotation.PostConstruct. 

Por contrato, uma classe JavaEE terá todos seus recursos inicializados antes do 
método anotado com @PostConstruct ser invocado. 


@ManagedBean 
public class InicializandoMB { 
private List<Carro> carros; 


@EJB 
private CarroDAO carroDAO; 


@PostConstruct 
public void init() { 
carros = carroDAO.listAll1(); 


// getters e setters omitidos 


Após alterar o código da classe InicializandoMB, é possivel notar que o có- 
digo que havia no construtor da classe foi movido para o método init () eo cons- 
trutor foi removido do código. O próprio servidor ficará encarregado de chamar o 
método init () e garantir que ele seja executado antes que o ManagedBean interaja 
com chamadas externas. 

Infelizmente, ha uma desvantagem na abordagem de inicialização de atributos 
em um método anotado com @PostConstruct. Considere agora que esse Mana- 
gedBean tem outros métodos que náo necessitam do valor da lista carros. 


@ManagedBean 
public class InicializandoMB{ 
private List<Carro> carros; 


@EJB 
private CarroDAO carroDAO; 
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@PostConstruct 
public void init(){ 
carros = carroDAQ.listAl1l1(); 


public List<String> getMarcas(){ 
return carroDAO.getMarcas() ; 


public List<String> getModelos(){ 
return carroDAO.getModelos(); 


} 


// getters e setters omitidos 


Repare que o método getMarcas () eo método getModelos podem ser cha- 
mados por uma página que nao utilize a lista de carros para nada. A desvantagem 
dessa abordagem é: mesmo que apenas os métodos getMarcas () e getModelos 
sejam utilizados, a lista de carros continuará a ser carregada do banco de dados, 
desnecessariamente. 

Nesse caso, podemos usar a abordagem lazy (preguicosa) de se carregar objetos 
no ManagedBean. Veja na nova versáo da classe InicializandoMB como utilizar 
a abordagem de inicialização lazy. 


@ManagedBean 
public class InicializandoMB{ 
private List<Carro> carros; 


@EJB 
private CarroDAO carroDAO; 


public List<Carro> getCarros(){ 


if (carros == null) { 
carros = carroDAQ.listAll(); 


return carros; 


public List<String> getMarcas(){ 
return carroDAO.getMarcas() ; 
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public List<String> getModelos ()1 
return carroDAO.getModelos(); 


} 


// getters e setters omitidos 


O método init () foi removido do código eo método get Carros foialterado. 
Caso a lista carros seja null, a consulta será realizada no banco de dados. Com 
essa abordagem, se o método getCarros nunca for invocado, essa lista nunca será 
inicializada e muitas viagens ao banco de dados deixaráo de existir. 

A desvantagem dessa abordagem é o fato de que cada método get deve ter um 
teste do tipo if (objeto == null). A quantidade de linhas da classe poderá 
subir consideravelmente. 





SERVE PARA TODO ESCOPO 


Note que iniciar um objeto de modo lazy ou pelo @PostConstruct 
é uma boa prática e pode/deve ser aplicada a qualquer tipo de es- 
copo e não apenas no @RequestScoped, como exibido na classe 


InicializandoMB. 











É possível utilizar uma abordagem híbrida na qual temos atributos carregados 
em um método anotado com @PostConstruct eatributos inicializados de modo 


lazy. 


@ManagedBean 

public class InicializandoMB{ 
private List<Carro> carros; 
private List<Cidade> cidades; 


@EJB 
private CarroDAO carroDAO; 


@EJB 
private CidadeDAO cidadeDAO; 


@PostConstruct 
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public void init() { 
cidades = cidadeDAO.listAl11(); 


public List<Carro> getCarros() { 
if (carros == null) { 
carros = carroDAQ.listAll(); 
} 


return carros; 


public List<String> getMarcas() { 
return carroDAO.getMarcas(); 


public List<String> getModelos() { 
return carroDAO.getModelos(); 
} 


// getters e setters omitidos 


No código da classe InicializandoMB, é possivel ver que ambas abordagens 
foram utilizadas. Preferencialmente, métodos anotados @PostConstruct devem 
carregar objetos que seráo de uso comum em todas ou na maior parte das chamadas 
realizadas ao ManagedBean. 

Uma outra maneira de iniciar objetos é informando ao JSF que um método deve 
ser executado antes de carregar toda a página. Esse método é informado através da 
página. Veja como a classe InicializandoMB ficará após uma leve refatoracáo. 


@ManagedBean 

public class InicializandoMB{ 
private List<Carro> carros; 
private List<Cidade> cidades; 


@EJB 

private CarroDAO carroDAO; 
@EJB 

private CidadeDAO cidadeDAO; 


public void inicializar(){ 
cidades = cidadeDAO.1listA11(); 
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carros = carroDAQ.listAll(); 
} 


// outros métodos omitidos 


Temos o método inicializar, que será disparado quando a página for cha- 
mada através da tag f: event. 


<f:event type="preRenderView" 
listener="#{inicializandoMB .inicializar}"/> 


Basta adicionar o código da tag £:event que o JSF chamará o método que 
carrega todos os atributos da tela antes de executar qualquer ação. 
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CAPITULO 12 


Injetando ManagedBeans 


Considere um ManagedBean em que, para decidir se o usuário pode ou não ver 
determinada informação, ele precisa determinar se o usuário tem o perfil necessário. 


// imports omitidos 
@ManagedBean 
public class CarroMB { 
public List<Carro> getCarrosPorUsuario() { 
List<Carro> carros = new ArrayList<Carro>(); 
usuario = // recupera usuario logado 


adicionarCarrosSimples(carros, usuario); 
adicionarCarrosEconomicos(carros, usuario) ; 
adicionarCarrosLuxuosos(carros, usuario); 


return carros; 


// outros métodos... 
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O método getCarrosPermitidosPorUsuario () retornaria apenas os car- 
ros necessários para determinados tipos de usuário. 

Note que o ManagedBean CarroMB precisa de um usuário para realizar a busca 
dos carros. E de onde viria esse objeto usuário? Esse objeto poderia ser buscado na 
sessáo, mas o caminho até chegar a ela é um tanto quanto longo... 


FacesContext context = FacesContext.getCurrentInstance() ; 

ExternalContext externalContext = context.getExternalContext () ; 

HttpServletRequest request = (HttpServletRequest) 
externalContext.getRequest () ; 

HttpServletSession session = request.getSession() ; 

Usuario usuario = (Usuario) session.getAttribute ("USUARIO LOGADO"); 


Para conseguir acessaro HttpSession chamamos 5 métodos em um trecho de 
código muito extenso e que fica difícil de ler. 

Uma prática comum é de ter um ManagedBean que facilite o acesso aos da- 
dos do usuário logado. Por exemplo, para acessar o usuário da sessão bastaria fazer 
usuarioMB.getUsuario(). 

Existe um modo de acessar um ManagedBean buscando o valor da sessáo que é 
um código táo verboso quanto o já mostrado anteriormente. 


// código reduzido 
userMB = (UsuarioMB) externalContext.getSessionMap().get("UsuarioMB") ; 
userMB. getUsuario() ; 


É possível extrair um ManagedBean diretamente do contexto do JSF, mas ainda 
assim é um código que ficará longo. Uma abordagem mais simples seria através da 
injeção do ManagedBean como dependência. 


@ManagedBean 
public class CarroMB( 


@ManagedProperty (value = "#{usuarioMB}") 
private UsuarioMB usuarioMB; 


public void setUsuarioMB(UsuarioMB usuarioMB) { 
this.usuarioMB = usuarioMB; 


public List<Carro> getCarrosPorUsuario(){ 
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List<Carro> carros = new ArrayList<Carro>() ; 
usuario = usuarioMB.getUsuario(); 
adicionarCarrosSimples(carros, usuario); 
adicionarCarrosEconomicos(carros, usuario); 
adicionarCarrosLuxuosos(carros, usuario); 


return carros; 


// outros métodos... 


Para que a injeção funcione, alguns passos são necessários: 


e Utilizar a anotação @ManagedProperty sobre o atributo do ManagedBean 
a ser injetado; 


* O ManagedBean a ser injetado precisa de um método set. 


Utilizar injeção de ManagedBean deixa o código mais simples de ler e entender. 

Outro detalhe sobre a injeção de ManagedBean é que só podemos injetar um 
ManagedBean dentro de outro com mesmo escopo ou um escopo mais abrangente. 
Por exemplo: é possível injetar um SessionScoped dentro de um RequestScoped, mas 
não é possível fazer o inverso. 
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CAPITULO 13 


Target 


Unreachable: Enfrente a 


NullPointerException do JSF 


Como desenvolvedores Java, estamos acostumados a nos deparar com as famosas 





NullPointer] 


Exception. Também náo estaremos livres disso ao trabalhar com 





JSF; portanto, é 


preciso aprender a lidar com elas, na forma como podem acontecer 


no JSF. Considere o simples ManagedBean a seguir: 


@ManagedBean 
public class 


CidadeMB { 


private Cidade cidade; 


public Ci 


dade getCidade() { 


return cidade; 


} 


// outros 


métodos 
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Caso o código #{cidadeMB.cidade.nome} seja executado, a seguinte men- 





sagem de erro será exibida: 


Target Unreachable, 'null' returned null 


No exemplo do ManagedBean CidadeMB, é possível ver que o atributo cidade 
é retornado mas em nenhum momento é instanciado. Esse erro pode ser facilmente 
contornado pelas abordagens do capítulo 11. 


@ManagedBean 
public class CidadeMB { 
private Cidade cidade; 


public Cidade getCidade() { 
if(cidade == null){ 
cidade = new Cidade(); 


return cidade; 


// outros métodos 


Note que no código da classe CidadeMB, o método get Cidade () agora con- 
tem um if para verificar se o atributo cidade está null. 

Se o código #{cidadeMB.cidade.estado.nome} for executado, o mesmo 
erro poderá acontecer. É necessário que todos os atributos náo primitivos sejam 
inicializados antes de serem utilizados. 

Um outro motivo para esse erro aparecer poderia ser utilizar a EL 
#{cidadeMB.cidade.estado.nome}, mas esquecer de anotar o Managed- 
Bean com @ManagedBean ou @Named 


Esse erro também pode acontecer por má utilização da EL. Caso a EL 





#{cidade.nome} seja escrita #cidade.nome, a mesma mensagem poderá apa- 
recer. 


Para finalizar, essa mensagem de erro pode vir descrita dos seguintes modos: 


Target Unreachable, 'null' returned null 
javax.el.PropertyNotFoundException: /pagina.xhtml 013,154 
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value="#{cidade.nome}": Target Unreachable, 'null' returned null 


Alvo inalcangävel, SEU_ATRIBUTO retornou null 
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CAPITULO 14 


Cuidado com o “Value is not valid” 


Existem erros que acontecem por detalhes sutis, cujos motivos ás vezes demoramos 
horas para descobrir. O erro Value is not valid é um deles. 


Ele é comumente encontrado quando usamos componentes do tipo select. 


Cidade: Caratinga +] 





Caratinga 
Governador Valadares 
Teófilo Otoni 





Figura 14.1: Value is not valid 


Devido ao fato de que o select é utilizado em classes, o JSF tentará comparar 
os valores através dos métodos hashCode e equals. Esse erro pode acontecer 
caso sua classe náo esteja implementando esses dois métodos corretamente. O mé- 
todo hashCode deve sempre retornar um inteiro que represente numericamente 
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a classe. Esse inteiro é comumente utilizado pela interface Set e outros componen- 
tes. O método equals deve sempre retornar se um objeto é igual ao outro, e o 
resultado nao pode variar. Para melhores detalhes veja: http://tutorials.jenkov.com/ 
java-collections/hashcode-equals.html 


public class Cidade{ 
private int id; 
private String nome; 


// outros métodos 


ODverride 
public int hashCode() { 
int hashCode = 33; 
hashCode = hashCode * 17 + id; 
hashCode = hashCode * 31 + nome.hashCode() ; 
return hashCode; 


@Override 
public boolean equals(Object obj) { 
if (obj instanceof Cidade) { 
Cidade cidade = (Cidade) obj; 
return cidade.id == id; 


return false; 


A classe Cidade esta descrita no formato adequado para ser utilizada em um 
componente select. 
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Parte III 


Front-ends JSF 


Um dos maiores problemas de pessoas que usam o JSF começa pelos arquivos 
de páginas. Má utilização do JSF pode levar a problemas de arquitetura, a compor- 
tamentos estranhos e até mesmo a desenvolvedores achando que é falha do próprio 
JSE 

Escolher entre JSP ou xhtml, otimizar o uso do Facelets, saber quando utilizar 
action ou actionListener são assuntos que serão vistos nessa parte do livro. 


CAPÍTULO 15 


Utilizar JSP ou xhtml? 


O JSP éum velho guerreiro e conhecido do mundo Java Web. Com o JSP veio a 
grande utilização do Servlet para fazer a integração e o desacoplamento entre o 
código HTML e o código Java. 

Nas primeiras versões do JSF, o JSP foi intensamente utilizado para exibir as 
informações para o usuário. Já com a versão 2.0 do JSF, apareceu o xhtml, com 
uma tecnologia chamada Facelets. 

Note que as vantagens do JSP sobre o xhtml estáo mais relacionadas com a 
questáo de estudo e aprendizado. Muitas empresas adotam o JSP ainda pelo fato de 
ser a primeira tecnologia a ser utilizada para Java Web, e acaba sendo mais prático e 
barato continuar a utilizar a mesma tecnologia. 

Conhego pessoas que até hoje sáo contra determinados frameworks. Por exem- 
plo, algum conhecido que usou a versáo 0.5 do JSF e nao gostou e espalhou isso para 
frente. Reconheço que antes da versão 2.0 era muito difícil de se trabalhar com o JSF, 
mas poucos sáo os que náo gostaram dessa nova versáo. 


Posso citar um caso em que uma pessoa me disse: “odeio Hibernate pois tem 
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muito XML”. Eu respondi que atualmente poderia se fazer a aplicação toda com ano- 
tacáo e a pessoa me disse que ainda assim preferia nem olhar o Hibernate. 

Com relacäo ao xhtml, quando utilizado com Facelets (que veremos em 
breve), é possivel ressaltar as seguintes vantagens: 


e XHTML com Facelets podem executar até 50% mais rapido que o JSP; 


e Todas as tags utilizadas nas páginas são declaradas de modo dinámico, não 
necessitam estar declaradas em um TLD (Tag Library Descriptor); 


e Facelets permitem Templates de modo avançado, em que a reutilização de có- 
digo é muito alta. 


Na codificação das páginas, é possível ver como o código de um JSP é seme- 
lhante a uma página xhtml. Só é possível notar essa semelhança em página simples, 
uma vez que as páginas aumentam sua complexidade e em número de componentes 
o código ficará bastante distinto. Um JSP ficaria como: 


<//0 taglib uri="http://java.sun.com/jsf/core" prefix="f" %> 
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> 
<html> 
<head> 
<title>Exemplo JSP</title> 
</head> 
<body> 
<h: form> 
<h:outputText value="014 Mundo JSP!" /> 
</h: form> 
</body> 
</html> 


Enquanto que o código equivalente no xhtml ficaria: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/zhtml1/DTD/2html1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 

xmlns:h="http://java.sun.com/jsf/html"> 

<h:head> 

<title>Exemplo xhtml</title> 
</h:head> 
<h:body> 
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<h: form> 
<h:outputText value="014 Mundo xhtml!" /> 
</h:form> 
</h:body> 
</html> 
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CAPITULO 16 


Utilizando imagens/css/javascript de 
modos simples 


Quando precisamos trabalhar com imagens em nossas aplicações, uma abordagem 
muito utilizada é passar o caminho completo de um arquivo. 


<!-- código que podem ou não exibir a imagem --> 

<h:graphicImage value="../imagens/minhoca.jpg" /> 

<h: graphicImage 
value="#{facesContext.externalContext.requestContextPath} 
/WebContent/imagens/minhoca. jpg" /> 


E a mesma prática também ocorre quando falamos de css e javascript. 


<!-- código que podem importar o css/javascript --> 
<link rel="stylesheet" type="text/css" href="../meu_css/style.css"> 
<script type="text/javascript" src="../meu_javascript/script.js" /> 
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Veja que o caminho físico foi passado para a página poder exibir uma imagem 
ou utilizar os recursos do css e do javascript. O problema é que basta mudar a página 
de lugar que os códigos já vistos param de funcionar. 

É muito complicado refatorar os diretórios das páginas uma vez que existe uma 
dependéncia táo forte entre o recurso utilizado. 

Para resolver esse problema, o JSF 2 tem o recurso chamado Libraries (biblio- 
tecas). Ele tratará cada tipo de recurso como uma biblioteca, ou seja, na aplicação 
pode existir uma ou mais bibliotecas para imagens, css e javascript. 

Para utilizar os recursos de nossa aplicacáo, basta criar uma pasta chamada 
resources, que ficará na raiz do projeto. Essa pasta conterá a estrutura de pas- 
tas e arquivos necessários para serem utilizados como bibliotecas. A imagem 16.1 
mostra como deve ficar essa estrutura. 


~ Biwebapp 
” O paginas 
> DD parte2 
vy Dparte3 
& utilizandoBibliotecas.xhtml 
” [resources 
v Eicss 
Es estilo.css 
v DO imagens 
a) minhoca.jpg 
” javascript 
as ola.js 


Figura 16.1: Estrutura das pastas 


Note que outras 3 pastas existem abaixo de resources: css, imagens € 
javascript. Cada diretório que for adicionado abaixo da pasta resources será 
tratado como uma biblioteca. 


A vantagem dessa abordagem é a facilidade para acessar os recursos. 


<!-- Código para importar os arquivos --> 
<h:outputStylesheet library="css" name="estilo.css" /> 
<h:outputScript library="javascript" name="ola.js" /> 
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<!-- Código para utilizar os recursos --> 
<h:graphicImage library="imagens" name="minhoca. jpg" /> 


Para adicionar o javascript, o css e utilizar uma imagem basta apontar para a 
biblioteca e para o nome do recurso. Ao utilizar essa abordagem é possível mudar as 
estruturas das páginas, que náo haverá problemas para localizar as bibliotecas. 

Note que, no trecho do código que mostra como utilizar os valores, em nenhum 
momento foi utilizado o caminho físico para se chegar aos arquivos. 
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CAPITULO 17 


Boa utilizacáo do Facelets 


Incorporado oficialmente a versáo 2 do JSF, uma das vantagens do Facelets é a pos- 
sibilidade de se utilizar um esquema de Template nas páginas da aplicação. 


Veja na imagem 17.1 como ficará a estrutura das páginas utilizadas no código 
fonte deste livro. 


~ Biwebapp 
> © paginas 
» O resources 


Figura 17.1: Estrutura das pastas 


<!-- master.xhtml --> 
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<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns :ui="http://java.sun.com/jsf/facelets" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core"> 


<h:head> 
<h:outputStylesheet library="css" name="estilo.css" /> 
<h:outputScript library="javascript" name="ola.js" /> 
</h:head> 
<h: body> 
<f:view> 
<div id="divLeft"> 
<ui:insert name="divLeft"> 
<ui:include src="left.xhtml" /> 
</ui:insert> 
</div> 


<div id="divMain"> 
<ui:insert name="divMain" /> 
</div> 
</f:view> 
</h: body> 
</html> 


Para utilizar uma página que servirá como Template, basta fazer como no có- 
digo da página master.xhtml. Esse layout é simples, apenas com um menu la- 
teral e uma área principal para exibir as informações. Sobre o código da página 
master.xhtml é possível dizer: 


e <ui:insert name="divLeft"></ui:insert> define uma área que será 
substituída. Note que essa área pode conter um valor padrão ou estar em 
branco. 


e <ui:include src="left.xhtml"/> faz a inclusão de uma página. 


A página do menu é uma página ainda mais simples, apenas com botões que 
serão inseridos em todas as páginas que utilizarem o Template. 


<!-- left.xhtml --> 
<h: body> 
<ui:composition> 
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<h:form> 
<p:button outcome="/applicationScoped.xhtml" 
value="@ApplicationScoped" /> 
<p:button outcome="/conversationScoped.xhtml" 
value="@ConversationScoped" /> 
<p: button outcome="/dependentScoped. xhtml" 
value="@DependentScoped" /> 
</h:form> 
</ui:composition> 
</h:body> 


Note que o código da página left .xhtm1 não tem conhecimento da página de 
Template. É possível encontrar a tag <ui:composition> que define que o código 
a ser inserido se encontra ali dentro. 





DICA 


É considerada boa prática deixar todo o código que será inserido via 
Template envolvido pela tag <ui:composition>. A vantagem disso é 
que todo código que estiver fora do <ui :composition> será ignorado 
pelo view handler do JSF. Com essa prática é possível adicionar código no 
<h:head> para que se possa visualizar a página sem que seja necessário 
compilar o projeto. 











Lembra da imagem da minhoca exibida no capítulo sobre 16? O código da página 
está utilizando a funcionalidade de Template do JSF 2.0. 


<!-- Página que exibe a minhoca utilizandoBibliotecas.xhtml --> 
<h: body> 
<ui:composition template="/templates/master.xhtml"> 
<ui:define name="divMain"> 
<h:button value="Qla via JavaScript" onclick="ola();" /> 
<br /> 
<p class="titulo">#{mensagens.bibliotecasTexto}</p> 
<h:graphicImage library="imagens" name="minhoca.jpg" /> 
</ui:define> 
</ui:composition> 
</h:body> 
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Veja como é simples e objetivo o código da página 
utilizandoBibliotecas.xhtml. Através da tag ui:composition é in- 
dicado qual template será utilizado. E com a tag ui: define indicamos qual parte 
do código iremos sobrescrever. 

A vantagem de utilizar Facelets como Template é que é possível mudar 
toda a estrutura de uma aplicação sem afetar todas as páginas. Note que a página 
utilizandoBibliotecas.xhtml não tem a mínima ideia de quantos menus 
existem na aplicação, ou se há duas ou três barras laterais no layout. 

Caso uma reestruturação geral fosse necessária, com Facelets, o impacto 
aconteceria apenas nas páginas de Template, e as páginas que exibem as informa- 
ções não seriam modificadas. 

É preciso ter muito cuidado para não aninhar forms html; para aninhar um form 
bastaria fazer <h: form><h: form></h: form></h: form>. O problema de ani- 
nhar form é que cada browser poderá ter comportamentos inesperados, como se 
perder ao dar focus a um componente, tab e outros. 


<!-- aninhar.xhtml --> 
<ui:composition template="/templates/master.xhtml"> 
<h: form> 
<ui:define name="divMain"><br/> 
<p>Alguma coisa</p> 
</ui:define> 
<ui:define name="divRight"/> 
</h: form> 
</ui:composition> 


Veja no código da página aninhar.xhtml que ao substituir o ui:define 
em alguma, com algum código que contenha o componente h: form, forms seráo 
aninhados. 

E preciso estar atento para nao deixar que essa situacäo de form aninhado acon- 
teca na aplicação. Um problema já presenciado em fórum era que a action de um 
botáo náo era chamada, pois o botáo estava dentro de um fórum aninhado. 

Outra facilidade do Facelets é colocar no Template os componentes 
que exibiráo as mensagem para o usuario. Pode ser um h:messages ou 
um p:growl do Primefaces, por exemplo. Desse modo não será necessá- 
rio declarar esse componente em todas as páginas. Veja no código da página 
reutilizandoComponenteMessage.xhtml como seria possível utilizar um 
único componente de mensagens para toda a aplicacáo. 
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<!-- reutilizandoComponenteMessage.xhtml --> 
<ui:composition template="/templates/master.xhtml"> 
<h:messages /> 
<ui:define name="divMain"> 
<p>Alguma coisa</p> 
</ui:define> 
</ui:composition> 


Cuidado ao ter que sobrescrever diversas regióes nas páginas apenas para apagar 
um texto que náo deveria ser exibido. Seria possível ter um código do tipo: 


<!-- codigo_feio.xhtml --> 
<ui:composition template="/templates/master.xhtml"> 
<ui:define name="divLeft01"/> 
<ui:define name="divLeft02"/> 
<ui:define name="divMain"><br/><br/><br/> 
<p>Alguma coisa</p> 
</ui:define> 
<ui:define name="divRight"/> 
</ui:composition> 


Veja o exemplo da página codigo feio.xhtml, nela são sobrescritas diversas 
áreas para não exibirem determinado valor padrão. Em uma página ou outra não 
seria tanto incômodo, mas caso aconteça em diversas páginas existe um modo de 
evitar esse problema: basta criar um outro Template. É possível ter mais que um 
Template em um projeto, de modo que ficaria organizado se seu projeto tivesse 33% 
das páginas em um, e outros 67% em outro Template. 


79 


CAPITULO 18 


Enviar valores para o ManagedBean 


Muitas vezes precisamos transferir dados que estáo sendo exibidos em uma tabela 
através de um datatable, como por exemplo o id de uma informagäo que que- 
remos editar. É possível enviar valores de um datatable para um ManagedBean 
de diversas maneiras. 

Para enviar os objetos, como demonstrado abaixo, basta colocar um botáo em 


uma coluna: 


<!-- dataTable.xhtml --> 
<h: form> 
<p:dataTable value="#{cidadeMB.cidades}" var="cidade" > 
<p:column> 
<f:facet name="header"> 
#{mensagens.cidadeNome} 
</f:facet> 
<h:outputText value="#{cidade.nome}" /> 
</p:column> 
<p:column> 


18.1. Envie valor como parámetro pelo f:setPropertyActionListener Casa do Código 





<!-- BOTÁO AQUI --> 
</p:column> 
</p:dataTable> 
</h:form> 


O código da página dataTable.xhtml mostra onde deve ficar o botáo para 
enviar um valor para o ManagedBean. Ele deve estar dentro de um h: form para 
funcionar corretamente. 

Abaixo veremos modos de enviar o valor o ManagedBean mostrando apenas o 
codigo do botáo. Seráo mostrados aqui trés modos para enviar um valor: Utilizando 
f:setPropertyActionListener, por parámetro e por binding. 


18.1 ENVIE VALOR COMO PARÁMETRO PELO 
F:SETPROPERTYACTIONLISTENER 


Esse é o modo de enviar o parámetro que necessita de menos métodos, em compara- 
ção com o os outros. Ele precisa apenas da tag f: setPropertyActionListener 
para informar ao ManagedBean que uma linha do dataTable foi selecionada. 


<p:commandButton value="#{mensagens.enviarValorSetProperty}" 
onclick="exibirCidadeWidget.show()" update=":exibirCidadeGrid"> 
<f:setPropertyActionListener value="#{cidade}" 
target="#{cidadeMB.cidade}" /> 
</p: commandButton> 


public String atualizarCidade(){ 
cidadeDAO.atualizar (cidade); 


return "cidade.xhtml"; 


A tag f:setPropertyActionListener tem como atributos value e 
target. value indica qual o objeto que será enviado ao ManagedBean; target 
indica qual o ManagedBean receberá o objeto. 

Lembre-se de que o escopo do ManagedBean faz diferença. Caso você utilize 
o RequestScoped, o valor poderá se perder. É necessário entender como funciona 
cada escopo e utilizar o tipo ideal para cada caso. Para um ManagedBean o ideal 
seria ViewScoped (veja 4). 

Para que o objeto seja corretamente enviado ao ManagedBean, é necessário ter 
métodos getters e setters implementados para o atributo. 
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18.2 ENVIE VALOR COMO PARÂMETRO 


Outro modo simples de se enviar um atributo é por método. Esse método receberá 
o objeto diretamente como parâmetro através da página. 


<p: commandButton value="Enviar" 
actionListener="#{cidadeMB.atualizarCidade(cidade)}" /> 


public String atualizarCidade (Cidade cidade) { 
cidadeDAO.atualizar (cidade) ; 
return "cidade.xhtml"; 


É necessário utilizar a versão 3.0 do Servlet e a versão 2.2 de EL para habilitar esse 
modo de envio de valor. A versão do EL vem do jar utilizado. A versão do Servlet é 
definida no web.xml. 


<web-app version="3.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 


18.3 ENVIE VALOR POR BINDING 


Existe uma técnica chamada binding que nada mais é que ligar um componente 
visual diretamente a um objeto no ManagedBean. 


<p:dataTable value="#{cidadeMB.cidades}" var="cidade" 
binding="#{cidadeMB.dataTable}" rowKey="#{cidade.id}" > 
<!-- outras colunas --> 
<p: column> 
<p:commandButton value="Enviar" 
actionListener="#{cidadeMB.selecionarCidade}" /> 
</p:column> 
</p:dataTable> 


private DataTable dataTable; 
public String atualizarCidade(){ 
Integer rowIndex = dataTable.getRowIndex() + 1; 


cidade = (Cidade) dataTable.getRowData(rowIndex.toString()); 
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cidadeDAO.atualizar (cidade) ; 
return "cidade.xhtml"; 


Para utilizar o binding basta indicar na página qual objeto do tipo DataTable 
estará ligado ao ManagedBean. E para usar no ManagedBean, basta pegar o index da 
linha que foi selecionada e depois buscar o valor dentro da tabela através do método 
getRowData. 

O ruim dessa abordagem é que cria uma acoplamento muito forte entre a página 
e o ManagedBean, tornando mais difícil a manutenção do código. 
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CAPÍTULO 19 


Temas dinámicos 


É sempre bom pensar em agradar o usuário, náo apenas com maravilhosas funcio- 
nalidades, mas também com um visual ao mesmo tempo bonito e funcional em se 
tratando de cores, imagens de fundo, tipografia etc. 

Uma prática interessante poderia ser possuir um conjunto de temas pré- 
definidos, no qual o usuário pudesse selecionar sua opção preferida. Um Mana- 
gedBean de sessáo poderia conter o valor default ou carregar algum valor padráo do 
banco de dados. 


@ManagedBean 

@SessionScoped 

public class UsuarioMB { 
private String userCSS = "estilo.css"; 
private List<String> cssDisponivel; 


@PostConstruct 
private void init(){ 
cssDisponivel = new ArrayList<String>(); 


Casa do Código 





cssDisponivel.add("estilo.css"); 
cssDisponivel.add("estilo2.css"); 


public String alterarEstilo(){ 
return null; 
} 


// getters e setters omitidos 





O método alterarEstilo() apenas retorna null, mantendo o usuario na 
mesma página. 
E basta permitir que o usuário escolha o estilo que será utilizado, por exemplo, 


através de um selectOneMenu: 


<!-- utilizando o estilo dinámico --> 
<h:outputStylesheet library="css" name="#{usuarioMB.userCSS}" /> 


<!-- utilizando action que mantém usuário na mesma página --> 

<p><h: outputText value="#{mensagens.troqueTema}:" /></p> 

<p:selectOneMenu value="#{usuarioMB.userCSS}"> 

<f:selectItems value="#{usuarioMB.cssDisponivel}" /> 

</p:selectOneMenu> 

<p:commandButton value="#{mensagens.troqueTemaTrocar}" 
action="#{usuarioMB.alterarEstilo()}" ajax="false" /> 


Para utilizar o estilo dinämico nas paginas, basta apontar a origem 
do arquivo CSS para a saída do ManagedBean <h:outputStylesheet 
library="css"name="#{usuarioMB.userCSS}” /> e um método que 
retorne o estilo do usuario. 





MANTENHA A OPÇÃO ESCOLHIDA PELO USUÁRIO 


Apesar do exemplo desse capitulo utilizar todos os valores em me- 
mória, é possível salvar essa configuração no banco de dados. Quando o 
usuário entrar na aplicação, a classe UsuarioMB poderia simplesmente 
acessar um objeto da sessão e buscar o valor do css padrão dele. 
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CAPITULO 20 


O que eu uso? Action ou 
ActionListener? 


Um dos maiores dilemas durante o desenvolvimento em JSF é o momento em que 
devemos utilizar action ou actionListener. 

O JSF tem dois modos de tratar as acóes do usuario. O primeiro é possivel definir 
como: “esse click vai executar uma ação e essa ação decidirá se o usuário permanece 
ou muda de tela”. Enquanto o segundo podemos definir como: “esse click realizará 
alguma ação, mas o usuário permanecerá na mesma tela ou será forçadamente redi- 


recionado”. 


20.1 REDIRECIONE O USUÁRIO COM ACTION 


<h:commandButton value="Click aqui!" action="#{managedBean.metodo}" /> 


public String metodo(){ 
// faz alguma coisa 


20.2. Trate eventos com actionListener Casa do Código 





return "nova_pagina"; 





RETORNO SEM EXTENSAO 


O código que mostra um exemplo de navegação return 
"nova_pagina"; nao adiciona a extensáo da página. O JSF procurará 
por uma página com a mesma extensáo da URL chamada. Se o usuário 
que chamou o método estiver na página http://site/index.jsf o JSF procu- 
rará uma página chamada “nova pagina.jsf”. Ao encontrar uma pagina 
chamada “nova_pagina.xhtml” ele entenderá que é esse arquivo o destino 
final. 











O que melhor caracteriza uma act ion é um método que retornará um objeto do 
tipo String. A action é melhor utilizada em um método que definirá o destino 
do usuário. Dessa forma, ele pode permanecer na tela que estava ou mudar para uma 
nova tela. 

Considere que o usuário esteja na tela de cadastro, e uma vez finalizado, ele será 
redirecionado para a tela de login. É possivel retornar null e fazer com que o usuá- 
rio permaneça na mesma tela caso algum erro aconteça. 


public String metodo ()4 
// mantém o usuário na mesma tela com todos os dados 
return null; 


20.2 TRATE EVENTOS COM ACTIONLISTENER 


<!-- como utilizar uma actionListener --> 
<h:commandButton value="Click aqui!" 
actionListener="#{managedBean.metodo}" /> 


public void metodo(javax.faces.event.ActionEvent event) { 
// faz alguma coisa 


Uma das características do actionListener é que o usuario sempre permane- 
cera na mesma tela. Esse tipo de método é muito utilizado em chamada Ajax, 


88 


Casa do Código Capítulo 20. O que eu uso? Action ou ActionListener? 





e em componentes próprios. Um actionListener recebe como parámetro um 





javax.faces.event.ActionEvent, com o qual vocé tem acesso, por exem- 
plo, ao componente que iniciou a ação. Uma boa analogia é você associar o 
actionListener com o tratamento de um evento de um clique, de uma ação. 
ActionListener naturalmente náo realizará uma navegacáo, mesmo retornando 
uma String como feito em uma Action. Para realizar uma navegacáo a partir de um 
método ActionListener será necessário utilizar o método sendRedirect. Para exe- 


cutar um sendRedirect basta fazer como no código exibido: 


FacesContext . getCurrentInstance() 
. getExternalContext () 
.redirect("/site. jsf”); 


Note que apesar de o método se chamar redirect ele é comumente chamado 
de sendRedirect, utilizado através da classe HttpResponse. sendRedirect. 





Caso apareça alguma mensagem de erro ao executar faça como abaixo: 


response .sendRedirect(); 
FacesContext.getCurrentInstance() .responseComplete() ; 


O método responseComplete () implicitamente informa ao JSF que nao será 





necessário trabalhar o response. 
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Parte IV 


Aproveite as bibliotecas de 
componentes 


Quando estamos desenvolvendo uma aplicação, muitas vezes precisamos que os 
elementos que envolvem a nossa tela tenham características diferentes das que por 
padrão elas possuem. Por exemplo, gostaríamos de ter um campo de texto onde fosse 
possível adicionar uma máscara. Ou então, um dataTable que fizesse ordenação 
dos dados dentro dele e assim por diante. Nesse caso, precisamos de componentes 
diferentes. Podemos encontrar esses componentes em bibliotecas, desenvolvidas e 
disponíveis em variadas formas na comunidade. 

Bibliotecas de componentes são focadas mais na parte de funcionalidades, em 
geral, criando dialogs, datatables, galerias etc, nas quais, entre as principais, se des- 
tacam o Primefaces, Richfaces, Icefaces e OmniFaces. Aliás é possível que qualquer 
pessoa possa criar sua biblioteca de componente e disponibilizá-la para outros de- 
senvolvedores ou reutilizá-la em diferentes projetos. 

Nesta parte do livro veremos sobre algumas características do Primefaces, Ri- 
chfaces, Icefaces e OmniFaces. Vantagens e desvantagens e exemplos de código de 
funcionalidades ricas e interessantes que conseguimos fazer com essas bibliotecas. 

Os exemplos demonstrados aqui não são para comparar uma biblioteca com a 
outra. Seus exemplos foram escolhidos apenas aleatoriamente. Há componentes que 
existem em todas as bibliotecas, mas outros apenas em uma. 








DICA 


Nos cédigos apresentados no livro foram utilizados diversos nomes 
de métodos, atributos, classes em portugués justamente para mostrar que 
o nome não influencia no comportamento da ação. Alguns tutoriais da 
internet utilizam de nomes estranhos e às vezes abusivos por acharem 
que é só com aquele nome que tudo se resolve. 








CAPÍTULO 21 


Primefaces 


E considerado por muitos o mais avancado do mercado. Ele tem diversas funciona- 
lidades prontas que facilitam e muito a vida do desenvolvedor. Possui mais de 130 
componentes em seu showcase com código que explica como utilizar. 


21.1 DATATABLE COM SELECAO COM UM CLICK 


Um DataTable pode ter diversas configuracóes e ajustes para melhorar a usabilidade 
do usuário. Um modo de utilizar o DataTable do Primefaces bem interessante é per- 
mitir que com apenas um clique ele exiba o valor da linha selecionada. 


21.1. DataTable com selegáo com um click Casa do Código 





(1 of 100) QE (Moll Lo lol [Zoo lio ¿Mil ji] foam el T 
ld Nome Estado 
1 CIDADE 1 ESTADO 1 
2 CIDADE 2 ESTADO 2 
3 CIDADE 3 ESTADO 3 
4 CIDADE 4 ESTADO 4 
5 CIDADE 5 ESTADO 5 
6 CIDADE 6 ESTADO 6 
7 CIDADE 7 ESTADO 7 
8 CIDADE 8 ESTADO 8 
9 CIDADE 9 ESTADO 9 
10 CIDADE 10 ESTADO 10 
(1 of 100) T |Z Sl lee li lel nl lle Ml 20] on. E 


Figura 21.1: DataTable Primefaces seleção em um clique 


Cidade x 


ld 5 
Nome CIDADE 5 
Estado ESTADO 5 


Duet, 


Figura 21.2: DataTable Primefaces seleção em um clique 
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Pelas imagens 21.1 e 21.2 é possivel ver como é interessante a abordagem de um 
clique para exibir os dados da linha selecionada. A agäo do clique poderia ser qual- 
quer ação como excluir, alterar etc. 


E como ficaria o código? Veja em seguida como é simples. 


<!-- dataTable.xhtml --> 
<h: form> 
<p:dataTable value="#{primefacesMB.cidades}" 
var="cidade" 
selection="#{primefacesMB.cidade}" 
selectionMode="single" 
paginator="true" 
rows="10" 
paginatorTemplate="{CurrentPageReport} 
{FirstPageLink} 
{PreviousPageLink} {PageLinks} 
{NextPageLink} {LastPageLink} 
{RowsPerPageDropdown}" 
rowsPerPageTemplate="5,10,15" 
style="width: 40%" 
lazy="true"> 
<p:ajax event="rowSelect" 
update=":cidadeDialogForm" 
oncomplete="cidadeWidget.show()"/> 
<p:column> 
<f:facet name="header"> 
#{mensagens.cidadeld} 
</f:facet> 
<h:outputText value="#{cidade.id}"/> 
</p:column> 
<p:column> 
<f:facet name="header"> 
#{mensagens.cidadeNome} 
</f:facet> 
<h:outputText value="#{cidade.nome}"/> 
</p:column> 
<p: column> 
<f:facet name="header"> 
#{mensagens.cidadeEstado} 
</f:facet> 
<h:outputText value="#{cidade.estado}"/> 
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</p:column> 
</p:dataTable> 
</h: form> 


Veja que no código <!-- dataTable.xhtml -->, que é um código facil de enten- 
der e de trabalhar, o atributo selection="#{primefacesMB.cidade}” 
aponta onde ficará armazenada a linha selecionada. O atributo 
selectionMode="single" é utilizado para definir os tipos de seleção pos- 
sível. O outro pedaço de código relativo ao clique único é a chamada Ajax para 
mostrar o valor em um dialog. 


<p:ajax event="rowSelect" 
update=":cidadeDialogForm" 
oncomplete="cidadeWidget.show()"/> 


A tag p:ajax tem o atributo event que informa qual agäo deve 
ser executada. update realizará atualização de um componente. 
oncomplete="cidadeWidget . show () " exibirá o dialog de cidades. 


<!-- dialog.xhtml --> 
<p:dialog widgetVar="cidadeWidget" 
modal="true" 
header="#{mensagens.cidade}"> 
<h:form id="cidadeDialogForm"> 
<h:panelGrid columns="2"> 
<h:outputText value="#{mensagens.cidadeld}"/> 
<h:outputText value="#{primefacesMB.cidade.id}"/> 
<h:outputText value="#{mensagens.cidadeNome}"/> 
<h:outputText value="#{primefacesMB.cidade.nome}"/> 
<h:outputText value="#{mensagens.cidadeEstado}"/> 
<h:outputText value="#{primefacesMB.cidade.estado}"/> 
</h:panelGrid> 
</h:form> 
</p:dialog> 


No código da página dialog.xhtml é possivel ver como utilizar uma dialog 
para exibir o valor. A propriedade widget Var é uma forma de facilitar a utilização 
de jQuery/JavaScript dentro de um xhtml; a chamada Ajax executa o comando do 
widgetVar assim: cidadeWidget.show(). 


O ManagedBean tem apenas get/set do atributo: List<Cidade> cidades. 
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21.2 DRAG AND DROP 


Uma função que agrada muito aos usuários de aplicações é o chamado Drag and 
Drop, ou seja, arrastar objetos de um lado e larga-los em outro. 


Escolha fotos da Minhoca 





Jogue a foto aqui 


Figura 21.3: Drag and Drop 


97 


21.2. Drag and Drop Casa do Cédigo 








Figura 21.4: Drag and Drop 
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Figura 21.5: Drag and Drop 


As imagens 21.3, 21.4 € 21.5 mostram que é uma funcionalidade muito interessante 
que atualmente é fácil de encontrar em diversos programas. O código é composto 
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de dois componentes p: fieldset e um outro chamado p:droppable. 


<p:fieldset legend="#{mensagens.primefacesEscolhaFotoMinhoca}"> 
<p:dataGrid id="fotosDisponiveis" 
var="foto" 
value="#{primefacesMB.fotos}" 
columns="3"> 
<p: column> 
<p:panel id="panelFotos" 
header="#{foto.nome}" 
style="text-align:center"> 
<h:panelGrid columns="1" 
style="width: 100%"> 
<p:graphicImage value="#{foto.path}"/> 
</h:panelGrid> 
</p:panel> 


<p:draggable for="panelFotos" 
revert="true" 
handle=".ui-panel-titlebar" 
stack=".ui-panel"/> 
</p:column> 
</p:dataGrid> 
</p:fieldset> 


O primeiro p:fieldSet é o que exibe os elementos disponíveis para serem 
arrastados. Dentro dele é possível encontrar um dataTable. A lista utilizada no 
dataTable é List<Foto> fotos, onde a classe foto tem apenas duas Strings; a 
primeira String é o nome da foto, e a segunda, o caminho físico da foto (por exem- 
plo, /home/uaihebert/fotos). O componente p:draggable é quem confi- 
gura qual objeto da tela poderá ser arrastado; ele tem o atributo for, que aponta 
quem poderá ser arrastado; o parâmetro revert, que indica que caso o objeto seja 
largado em um lugar inválido ele deve voltar ao seu lugar de origem; os parâmetros 
handle, que estão falando qual classe servirá de ativador para se mover o objeto, e 
no caso foi escolhido o titulo do panel - o usuário não conseguirá mover o objeto a 
não ser pelo título; stack, que controla automaticamente o “arrastar” do compo- 


nente. 


<p:fieldset id="fotosSelecionadas" 
legend="t(mensagens.primefacesFotosSelecionada)" 
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columns="3"> 
<p:outputPanel id="fotosDespejadas"> 
<h:outputText value="#{mensagens.primefacesArrasteAqui}" 
rendered="#{empty primefacesMB.fotosSelecionadas}" 
style="font-size:24px;"/> 
<p:dataGrid var="foto" 
value="#{primefacesMB.fotosSelecionadas}" 
rendered="#{not empty 
primefacesMB.fotosSelecionadas}"> 
<p:column> 
<p:panel id="panelFotos" 
header="#{foto.nome}"> 
<p:graphicImage value="#{foto.path}"/> 
</p:panel> 
</p:column> 


</p:dataGrid> 
</p:outputPanel> 
</p:fieldset> 


O segundo p: fieldSet nada mais é do que o responsável por exibir os dados 
das fotos que foram arrastadas. Logo abaixo do p: fieldSet virá o último compo- 
nente que definirá onde um objeto poderá ser jogado. 


<p:droppable for="fotosSelecionadas" 
tolerance="touch" 
activeStyleClass="ui-state-highlight" 
datasource="fotosDisponiveis" 
onDrop="handleDrop"> 

<p:ajax listener="#{primefacesMB.fotoDespejada}" 
update="fotosDespejadas fotosDisponiveis"/> 
</p:droppable> 


O componente p:droppable define qual objeto receberá os objetos joga- 
dos. for aponta qual componente segurará o objeto jogado; tolerance 
aponta qual o tipo de acäo para que ele considere que o objeto foi jogado; 
activeStyleClass define qual estilo o componente que receberá um objeto 
terá enquanto ele não for jogado: ver na foto 21.4. datasource é o compo- 
nente que contém os objetos que poderão ser arrastados e onDrop é ação que 
será executada (que veremos em breve). Existe também um listener que realiza 
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a transferéncia da foto de uma lista ( #{primefacesMB.fotos}) para outra( 


#{primefacesMB.fotosSelecionadas}). 


// m&todo executado pelo listener 
public void fotoDespejada(DragDropEvent event) { 
Foto foto = (Foto) event.getData(); 


getFotos().remove(foto); 
getFotosSelecionadas().add(foto); 
} 


function handleDrop(event, ui) { 
var droppedCar = ui.draggable; 


droppedCar.fade0ut('fast'); 


Efeito jQuery disparado pelo evento onDrop definido no componente 


droppable 


21.3 NOTIFICADOR 


E normal enviar uma resposta para usuario indicando se a agäo foi realizada ou nao. 
“Salvo com sucesso”, “Erro ao alterar” ou “Você tem certeza? Sério mesmo?” são 
mensagens que sao exibidas para os usuários de aplicagöes. 


Veja nas imagens 21.6 e 21.7 um interessante recurso chamado Growl. 


Operação realizada com sucesso 
y 





» Seleção de única linha 


» Drag and Drop 
~ Notificador 


Enviar Mensagem de Sucesso: Enviar 


Enviar Mensagem de Erro: Enviar 


Figura 21.6: Drag and Drop 
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+ Seleção de única linha 
» Drag and Drop 


+ Notificador 


Enviar Mensagem de Sucesso: Enviar 


Enviar Mensagem de Erro: Enviar 


Figura 21.7: Drag and Drop 


Para utilizar o Growl basta usar um código bastante simples e objetivo: 


<!-- growl.xhtml --> 
<h: form> 
<p:growl id="mensagens"/> 
<h:outputText value="#{mensagens .mensagemSucesso}:"/> 
<p:commandButton value="#{mensagens.enviar}" 
actionListener="#{primefacesMB .mensagemSucesso}" 
update="mensagens"/> 
<h:outputText value="#{mensagens.mensagemErro}: "/> 
<p:commandButton value="#{mensagens.enviar}" 
actionListener="#{primefacesMB.mensagemErro}" 
update="mensagens"/> 
</h:form> 


O código da página growl.xhtml tem um componente p:growl que é o 
responsável por mostrar a mensagem ao usuário. Seu comportamento é exatamente 
igual ao componente h:messages do JSE Os botóes exibidos nas páginas nada 
mais fazem do que uma chamada Ajax que cria a mensagem a ser exibida. Ao final 
da chamada Ajax os botões estão configurados para atualizarem o growl através do 
atributo update="mensagens". 

Para fazer com que uma mensagem seja exibida para um usuário, basta fazer 
como o código a seguir: 


private final String SUCESSO = "Operagäo realizada com sucesso"; 
private final String ERRO = "Ops! Ocorreu um erro inesperado"; 
public void mensagemSucesso(ActionEvent event) { 
FacesContext instance = FacesContext.getCurrentInstance() ; 
instance.addMessage(null, 
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new FacesMessage (FacesMessage. SEVERITY INFO, 
SUCESSO, 
SUCESSO) 
); 


public void mensagemErro(ActionEvent event) { 


FacesContext instance = FacesContext.getCurrentInstance() ; 
instance.addMessage (null, 


new FacesMessage (FacesMessage.SEVERITY_ERROR, 
ERRO, 
ERRO) 
); 


21.4 AUTO COMPLETE 


O Auto Complete, como diz o nome, completa uma informação que o usuário está 
digitando em um input. Assim como no google, é possível ter esse mesmo compor- 
tamento com o Primefaces. Veja na imagem 21.8 e 21.9 como fica esse componente. 


- Auto Complete 


CIDADE. 45] y 
CIDADE 45 
CIDADE 450 
CIDADE 451 
CIDADE 452 
CIDADE 453 


+ 





Figura 21.8: AutoComplete 
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Cidade x 


id 451 
Nome CIDADE_451 
Estado ESTADO 451 


Figura 21.9: AutoComplete 


Esse componente é altamente configurável e deve ser utilizado com cautela. 


<!-- autoComplete.xhtml --> 

<p:autoComplete id="autoComplete" 
forceSelection="true" 
minQueryLength="3" 
value="#{primefacesMB.cidade}" 
completeMethod="#{primefacesMB.autoComplete}" 
var="cidade" 
itemLabel="#{cidade.nome}" 
itemValue="#{cidade}" 
label="#{mensagens.cidade}" 
dropdown="true" 
required="true" 
queryDelay="3000"/> 

<br/> 

<p:commandButton value="#{mensagens.enviar}" 
update=":cidadeDialogForm" 
oncomplete="cidadeWidget.show()"/> 


Note no código da página autoComplete.xhtml a quantidade de configura- 
ções (a maioria não obrigatória) que é possível ter, e existem outras que não foram 
utilizadas. forceSelection indica se a seleção de algum valor é obrigató- 
ria, para evitar que o usuário deixe um valor qualquer, como uma cidade chamada 
123***, minQueryLength é a quantidade minima de caracteres necessários para 
disparar a chamada no ManagedBean. value terá o valor selecionado pelo usuá- 
rio. completeMethod="#{primefacesMB.autoComplete}” é o método que 
retornará a lista filtrada pelo valor informado pelo usuário. var é o nome que 





um item da lista retornada no método definido no completeMethod retornará; 


105 


21.4. Auto Complete Casa do Código 





itemLabel é o nome que será exibido ao usuário; e itemValue o valor selecio- 
nado que será enviado ao ManagedBean. dropdown="t rue" exibe ou não o botão 
para exibir os valores. 

queryDelay é um contador para disparar a chamada Ajax. Imagine que 
o usuário digitou ABC que é o tamanho mínimo de uma pesquisa definido em 
minQueryLength. Ao atingir 3 caracteres o Primefaces iniciará um contador com 
um tempo definido em milissegundos na opgáo queryDelay. Caso o usuário edite 
o texto, o tempo de espera será reiniciado. A chamada Ajax somente será disparada 
quando o tempo de espera for zerado. 


// metodoAutoComplete. java 
public List<Cidade> autoComplete (String valorPesquisado) { 
final int maximoResultadosExibidos = 5; 


if (valorPesquisado == null || valorPesquisado.isEmpty()) { 
int comecarPesquisaPosicao = 1; 
return cidadeDAO.buscaPorPaginacao(comecarPesquisaPosicao, 
maximoResultadosParaExibido) ; 


return cidadeDAO.findByNameLike(valorPesquisado, 
maximoResultadosParaExibido) ; 


O método da classe MetodoAutoComplete. java é bem simples e retorna 
uma lista. Ele recebe um valor enviado pelo usuário e testa se o valor tem um pará- 
metro preenchido. Se o usuário clicar no botão do dropdown esse valor não viria 
preenchido. 

Fique atento a um detalhe: toda vez que um valor de um componente select 
for um objeto, será necessário um Converter. Em nosso caso o itemValue foi 
definido com #{cidade}. 


// CidadeConverter.java 
@FacesConverter(forClass = Cidade.class) 
public class CidadeConverter implements Converter { 


@Override 
public Object getAsObject(FacesContext arg0, U 
IComponent argl, 
String key) 1 
CidadeDAO cidadeDAO = // busca o DAO; 
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return cidadeDAO.findById(Integer.parseInt (key)); 


@Override 
public String getAsString(FacesContext arg0, 
UlComponent argl, 
Object cidadeObject) { 
if(cidadeObject != null && cidadeObject instanceof Cidade) { 
Cidade cidade = (Cidade) cidadeObject; 
return String.valueOf (cidade. getId()); 


return ""; 


Um converter normal de JSF que simplesmente converte um valor enviado pela 
View em objeto ou retorna o ID do objeto. 





DICA 


É preciso tomar bastante cuidado com a configuração/utilização 
de um Converter. A anotação @FacesConverter(forClass = 
Cidade.class) foi utilizada para definir que toda classe Cidade 
da aplicacáo utilizará esse Converter. Infelizmente algumas im- 
plementações simplesmente ignoram esse valor da anotação e não 
encontram o converter. A solução seria utilizar a anotação assim: 
@FacesConverter (value = "cidadeConverter"). E em cada 
componente que necessitasse de um Converter fazer uso do seguinte 
atributo: converter="cidadeConverter”. 











21.5 POLL 


Existe um recurso interessante do JSF que é realizar chamadas a um ManagedBean 
sem a necessidade de ser disparada por um usuário. Em outras palavras, o Primefaces 
automaticamente dispara chamadas em um período predeterminado por meio do 
componente Poll. 
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~ Contador 


Chamadas Ajax seráo feitas automaticamente: 3 


Figura 21.10: Poll 


Esse componente é simples de configurar. 


<h: form> 
<h:outputText id="contadorText" 
value="#{mensagens.contadorTexto}: 
#{primefacesMB.contador}"/> 


<p:poll interval="3" 
listener="#{primefacesMB.somar}" 
update="contadorText"/> 
</h:form> 


O componente p:poll realizará uma chamada Ajax a cada 3 segundos ao Ma- 
nagedBean e ao final da chamada atualizaráo output Text para exibir o novo valor. 


private int contador; 


public void somar(){ 
contador++; 


public int getContador() { 
return contador; 


public void setContador (int contador) { 
this.contador = contador; 


O componente p:poll aqui foi utilizado como um contador, mas poderia ser 
utilizado para verificar se o usuário continua na página do sistema, por exemplo. 
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21.6 CONSIDERAÇÕES FINAIS 


Através dos componentes exibidos foi possível ver que existem diversas funcio- 
nalidades prontas e que funcionam sem a necessidade de códigos complicados e 
enormes. Todos os exemplos foram retirados do showcase do próprio Primefa- 
ces: http://primefaces.org/showcase/ . É possível fazer o download do código fonte 
(SVN) de todos os exemplos aqui: http://repository.primefaces.org/org/primefaces/ 
prime-showcase/ . 

Em seu forum é possivel falar diretamente com os mantenedores do Primefaces. 
Lá eles tiram dúvidas e até registram bugs para futuros reparos. E muito utilizado em 
meio académico (por já vir com um belo CSS) e por sua facilidade de utilizacáo. Os 
exemplos citados acima são bem fáceis de serem utilizados e aplicados com poucas 
linhas de código. 

Infelizmente nem tudo são flores: existe também o "Dark Side” do Primefaces. 
Eles não se preocupam nem um pouco com retrocompatibilidade. É muito comum 
ver na internet pessoas dizendo: “eu mudei da versão x para a x.1 e a tela parou de 
funcionar”. 

É preciso ter bastante cuidado ao mudar de versão, esse componente ainda não 
está confiável quanto a mudanças. Um novo comportamento interessante deles é 
que, antigamente ao mudar de versão, caso um parâmetro fosse eliminado de um 
componente, a tela apresentaria erro. Hoje em dia, diversos componentes que en- 
contram um parâmetro que foi eliminado não dão mais a mensagem de erro. Aquele 


parâmetro simplesmente passa a ser ignorado. 
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ESTEJA ATENTO 


No capítulo 20 vimos quando e como utilizar action e actionListener. 

É preciso estar atento ao fato de que o componente 
p:commandButton do Primefaces utiliza ajax por padrão. É normal 
encontrar na internet desenvolvedores reclamando que determinado 
método não é chamado, ou então que a navegação do método não está 
sendo feita. 

Como vimos no capítulo 20, apenas uma action executa uma navega- 
ção de modo natural. É necessário desativar o ajax do commandButton 
para que uma action se comporte normalmente. Basta definir que o a 
opção ajax seja iguala false. 


<p: commandButton ajax="false" /> 











Na documentação do Primefaces (http://primefaces.org/documentation.html) 
é possível encontrar todos os estilos de todos os componentes, como 
cor/fonte/configuração de css, e podem ser alterados. 
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Temas Dinámicos com Primefaces 


Uma das vantagens do Primefaces é a questáo do tema. Existem diversos tipos de 
temas já prontos para serem utilizados e a maior vantagem é que o desenvolvedor 
também pode criar e utilizar. 

Veja com é simples fazer uso de um tema do Primefaces. Primeiro vamos utilizar 
o ManagedBean de sessáo do usuário para saber qual o seu tema. 


// imports omitidos 

@ManagedBean 

@SessionScoped 

public class UsuarioMB { 
private String tema; 


public String getTema() { 
if (tema == null){ 
tema = "casablanca"; 
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return tema; 
} 


// outros métodos omitidos 


Veja que na classe UsuarioMB encontra-se uma String chamada tema que 
indicará ao Primefaces qual o tema do usuario. Um detalhe interessante é que no get 
é feito um teste para saber seo tema esta null ou nao, seria nesse momento que, caso 
O tema estivesse null, se pegaria a informação do usuário logado na aplicação. 

Para deixar a escolha do tema habilitado para o usuário, bastaria utilizar o com- 
ponente chamado ThemeSwitcher do próprio Primefaces. 


<p:themeSwitcher value="#{usuarioMB.tema}"> 
<f:selectItems value="#{temasDisponiveis.temas}" /> 
</p:themeSwitcher> 


@ApplicationScoped 

@ManagedBean 

public class TemasDisponiveis { 
private List<String> temas; 


public List<String> getTemas() { 
if(temas == null){ 

temas = new ArrayList<String>() ; 
temas.add("casablanca") ; 
temas.add("cupertino") ; 
temas.add("dark-hive"); 
temas.add("bluesky"); 
temas.add("blitzer"); 


return temas; 


public void setTemas(List<String> temas) { 
this.temas = temas; 


Basta colocar o componente ThemeSwitcher dentro de um h: form que, por 
Ajax, o Primefaces trocará toda a interface de seus componentes. Note que foi criado 
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um ManagedBean com 0 escopo ApplicationScoped que conterá todos os temas 
da aplicação. 

E por último, será necessária uma pequena configuracáo no web.xml da aplica- 
ção. O código adicionado no web.xml informará ao Primefaces onde buscar o tema; 
em nosso caso, no ManagedBean. 


<context-param> 
<param-name>primefaces . THEME</param-name> 
<param-value>#{usuarioMB.tema}</param-value> 
</context-param> 


E para o usuario trocar o tema atual por outros será bem simples. Veja nas ima- 
gens 22.1, 22.2 € 22.3. 


Altere o tema do primefaces: 
casablanca E 


@ApplicationScoped 
@ConversationScoped 
@Dependent 
@NoneScoped 


@RequestScoped 


MO anninanOnnamand 


Figura 22.1: Tema selecionado 
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Altere o tema do primefaces: 
casablanca > 


' casablanca | 
cupertino ad 

| dark-hive E 
bluesky 
blitzer 


TONonescopes ™™ 
@RequestScoped 


(MlaccinnOrannar 


Figura 22.2: Escolhendo novo tema 


Altere o tema do primefaces: 
O ApplicationScoped 
@ConversationScoped 
@Dependent 


(ANoneScoped 


@RequestScoped 





Figura 22.3: Novo tema aplicado 


É possível criar um evento ajax para persistir a alteração no 
banco de dados para o usuário. Basta adicionar a linha <p:ajax 
listener="#{usuarioMB.salvarTemaNoDB}"/> dentro do componente 
ThemeSwitcher que, via Ajax, o Primefaces chamará esse método e esse valor 
poderá ser persistido. 
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DICA 


Note que o objeto tema da classe Usua 
Em diversos tutoriais, livros e até mesmo no 
utilizadas classes para esse valor. 

Neste livro foi utilizada a abordagem de 
entendimento e aplicação. 





rioMB é apenas uma String. 
showcase do Primefaces são 


String para ficar mais fácil o 








A melhor parte dessa história é que para utilizar um desses temas basta adicionar 





os temas predefinidos no pom.xml ou na pasta WI 


<!-- pom --> 

<dependency> 
<groupId>org. primefaces.themes</group 
<artifactId>cupertino</artifactId> 
<version>${primefaces.tema}</version> 
<scope>runtime</scope> 

</dependency> 

<dependency> 
<groupId>org.primefaces.themes</group 
<artifactId>dark-hive</artifactId> 
<version>${primefaces.tema}</version> 
<scope>runtime</scope> 

</dependency> 

<dependency> 
<groupld>org.primefaces.themes</group 
<artifactId>casablanca</artifactId> 
<version>${primefaces.tema}</version> 
<scope>runtime</scope> 

</dependency> 

<dependency> 
<groupld>org.primefaces.themes</group 
<artifactId>bluesky</artifactId> 
<version>${primefaces.tema}</version> 
<scope>runtime</scope> 

</dependency> 

<dependency> 
<groupId>org.primefaces.themes</group 
<artifactId>blitzer</artifactId> 


EB-INF/lib. 


Id> 


Id> 


Id> 


Id> 


Id> 
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<version>${primefaces.tema}</version> 
<scope>runtime</scope> 
</dependency> 


Para criar seu proprio tema vá ao site: http://jqueryui.com/themeroller/ . Nesse 
site é possivel estilizar os aspectos visuais da aplicacáo; no manual do Primefaces é 
mostrado como aplicar esse tema recém-criado ao seu projeto. 
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Componentes do Primefaces nao 
Aparecem 


É fácil perder bons minutos procurando na internet a solução para esse problema. 
As vezes temos um código todo correto, mas o infeliz do componente do Primefaces 
náo aparece por nada. 


<head> 
</head> 
<body> 
<!-- exemplo.xhtml --> 
<p:button value="0la" /> 
</body> 


Por mais que um código pareça correto, o Primefaces tem as suas regras para 
funcionar. O código do arquivo exemplo.xhtml mostra uma página com todos 
os blocos necessários da linguagem HTML. A grande pegadinha aí é que os compo- 
nentes no Primefaces necessitam de h:head e não head, e de h:body em vez de 
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apenas body. Esse pequeno detalhe faz toda diferenga. 


Ainda existe um porém. As vezes, mesmo em uma página com h:head e 
h:body o componente náo irá aparecer. 


<h:head> 
</h:head> 
<h: body> 
<!-- exemplo2.xhtml --> 
<p:editor value="" /> 
</h: body> 


Mesmo a pagina exemplo2.xhtml contendo h:heade h:body em algumas 
versões do Primefaces esse componente pode não aparecer. Qual seria o motivo? 

Diversos componentes do Primefaces necessitam estar envoltos pela tag 
h:form. No código acima bastaria colocar a tag h:form antes do p:editor e 
fechá-la após o p:editor. 
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Richfaces 


O Richfaces é uma velha biblioteca de componentes do JSE massivamente utilizado 
no JSF 1.2. Sua utilizacáo no JSF 1.2 era ideal para cenários que necessitassem de 
Ajax. 

Atualmente a recém versão 4 foi lançada para voltar a concorrer com as outras 
bibliotecas do mercado, que hoje tem o foco no JSF 2.0. O Richfaces tem bastantes 
componentes desenvolvidos, e que facilitam o uso do desenvolvedor. 


24.1 DATATABLE COM COLUNAS CONGELADAS 


A função de congelar colunas é possível de ser utilizada no Excel e pode ser algo 
muito prático nas aplicações JSF. O Richfaces tem essa função. 


24.1. DataTable com Colunas Congeladas 
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CIDADE_1 
CIDADE_2 
CIDADE_3 
CIDADE_4 
CIDADE_5 
CIDADE_6 
CIDADE_7 
CIDADE_8 
CIDADE 9 


CIDADE_1 
CIDADE_2 
CIDADE_3 
CIDADE_4 
CIDADE_5 
CIDADE 6 
CIDADE_7 
CIDADE_8 
CIDADE 9 


ESTADO_1 
ESTADO_2 
ESTADO_3 
ESTADO_4 
ESTADO_5 
ESTADO_6 
ESTADO_7 
ESTADO_8 
ESTADO 9 


ESTADO_1 
ESTADO_2 
ESTADO_3 
ESTADO_4 
ESTADO_5 
ESTADO_6 
ESTADO_7 
ESTADO_8 
ESTADO 9 


-i 
É 


Esisjaleia sieje 


4 


- 


2 Ruas Total de Bairros Tote 

Eleit 

0 o | 
15 3150 
30 6300 

45 9450 3 
60 12600 
75 15750 
90 18900 
105 22050 

120 25200.” 





Figura 24.2: DataTable com Colunas Congeladas 
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CIDADE 1 
CIDADE 2 
CIDADE 3 
CIDADE 4 
CIDADE 5 
CIDADE 6 
CIDADE 7 
CIDADE 8 
CIDADE 9 


ESTADO 1 
ESTADO 2 
ESTADO 3 
ESTADO 4 
ESTADO 5 
ESTADO 6 
ESTADO 7 
ESTADO 8 
ESTADO 9 


Total de Bairros Total de 


15750 


Bgl slalslals| ale 


a 
- 


Figura 24.3: DataTable com Colunas Congeladas 


As imagens 24.1, 24.2 € 24.3 mostram como esse recurso € interessante para me- 


lhorar a utilização dos usuários acostumados com essa facilidade. 


<!-- dataTable.xhtml --> 
<rich:extendedDataTable value="#{richfacesMB.cidades}" 


var=" 


cidade" 


frozenColumns="2" 
style="height :250px; width:400px;" 
selectionMode="none"> 


<f:facet name="header"> 


<h:outputText value="#{mensagens.cidadePlural}"/> 


</f:facet> 


<rich: column> 
<f:facet name="header"> 


<h:outputText value="#{mensagens.cidadeNome}"/> 


</f:facet> 


<h:outputText value="#{cidade.nome}"/> 


</rich:column> 
<rich:column> 
<f:facet name="header"> 


<h:outputText value="#{mensagens.cidadeEstado}"/> 


</f:facet> 
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<h:outputText value="#{cidade.estado}"/> 
</rich: column> 
<rich:column> 
<f:facet name="header"> 
<h:outputText value="#{mensagens.cidadeTotalRuas}"/> 
</f:facet> 
<h:outputText value="#{cidade.totalRuas}"/> 
</rich: column> 
<!-- outras 1000 colunas --> 
</rich:extendedDataTable> 


O DataTable, apesar de ter um funcionamento diferente, tem sua configuragäo 
bem parecida com a de qualquer outro DataTable. O que o torna diferente é a con- 
figuração frozenColumns="2" que determina a quantidade de colunas a serem 
congeladas. 


24.2 TOOL TIP 


A ferramenta de Tool Tip é bem comum no mundo web, basta passar o mouse que 
uma informagäo sobre aquela área será exibida. A imagem 24.4 mostra como essa 
ferramenta funciona com o Richfaces. 


Esse ToolTip já foi carregado com a página e seguirá o mouse 





ToolTip normal, carregado assim que o mouse é passado por cima 


Figura 24.4: Tool Tip Normal 


<rich:panel> 
#{mensagens.richfacesToolTipNomal} 
<rich?tooltip> 
#{mensagens.richfacesToolTipNomalTexto} 
</rich:tooltip> 
</rich:panel> 


O cödigo para exibir um Tool Tip precisa apenas do componente 
rich:tooltip dentro da regiáo em que ele deve ser exibido. O Richfaces tem ou- 
tras configuracóes possiveis para um Tool Tip. 


A imagem 24.5 mostra como seria um ToolTip com delay. 
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Esse ToolTip sera exibido com atraso configurado no componente, 2 segundos. 
Esse ToolTip será exibido com Delay (Atraso) Ele náo segirá o mouse 


` 














Figura 24.5: Tool Tip com Delay 


<rich:panel> 
<h:outputText value="#{mensagens.richfacesToolTipDelay}"/> 
<rich:tooltip followMouse="false" showDelay="2000"> 
<h:outputText value="#{mensagens.richfacesToolTipDelayTexto}"/> 
</rich:tooltip> 
</rich:panel> 


O delay é usado para atrasar a exibigáo do Tool Tip para o usuario. Para uti- 
lizar o delay basta configurar com o atributo showDelay="2000" que o texto do 
Tool Tip será exibido após dois segundos. O atributo followMouse="false" 
foi utilizado para informar ao RichFaces que o Tool Tip não deve seguir o mouse. 


A imagem 24.6 mostra como seria um Tool Tip com um texto chamado via Ajax. 





O texto abaixo foi criado por uma chamada Ajax a um ManagedBean. 
Será contado quantas vezes o mouse passou em cima. Cada vez que o mouse passar, uma chamada será realizada. 








Esse ToolTip foi carregado por Ajax 2 


x 





Figura 24.6: Tool Tip via Ajax 


<h:form> 
<rich:panel> 
<h:outputText value="#{mensagens.richfacesToolTipAjax}"/> 
<rich:tooltip mode="ajax"> 
<h:outputText value="#{mensagens.richfacesToolTipAjaxTexto}"/> 
<h:outputText value="#{richfacesMB.contadorAjax}"/> 
</rich:tooltip> 
</rich:panel> 
</h:form> 


Para que uma mensagem exibida seja carregada via Ajax basta utilizar o atri- 
buto mode="ajax". O get/set do atributo contador Ajax são normais com a única 
diferença de que aumentam o contador a cada chamada. 


123 


24.2. Tool Tip Casa do Código 





public int getContadorAjax() { 
return ++contadorAjax; 


public void setContadorAjax(int contadorAjax) { 
this.contadorAjax = contadorAjax; 


Uma outra opgäo interessante é a de exibiro Tool Tip apenas após o clique. E 
para tornar essa opção mais interessante uma chamada Ajax poderia ser executada 
após o clique. 


A imagem 24.7 mostra como seria um Tool Tip com um clique e Ajax. 






Vezes que o Ajax foi acionado: 


Apenas após um clique é que o ToolTip será exibido e realizando uma chamada ajax 


5 





Figura 24.7: Tool Tip via Ajax 


<rich:panel> 
<h:outputText value="#{mensagens.richfacesToolTipPorClique}"/> 
<rich:tooltip followMouse="false" showEvent="click" mode="ajax"> 
<h:outputText value="#{mensagens.porCliqueTexto}"/> 
<h:outputText value="#{richfacesMB.contadorClique}"/> 
</rich:tooltip> 
</rich:panel> 


Para definir que um Tool Tip pode ser apenas exibido após o clique basta utilizar 





o atributo showEvent="click", e um get/set no ManagedBean. 


public int getContadorClique() { 
return contadorClique++; 


public void setContadorClique(int contadorClique) { 
this.contadorClique = contadorClique; 
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24.3 LoG 


Uma ferramenta que pode ajudar em requisições Ajax é a ferramenta Log. A ima- 
gem 24.8 mostra como a ferramenta Log trabalha. 


Log 





uaiHebert.com 
Hello uaiHebert.com! 
_Clear [into z] 
info [14:21:35.995]: Received 'begin' event from <input id=j_idt119:j_idt121 ...> 

info [14:21:36.134]: Received 'beforedomupdate' event from <input id=j_idt119:j_idt121 ...> 

info [14:21:36.138]: Listing content of response changes element: 

Element update for id=j_idt119:textoEnviado 

<update id="j idtll9:textoEnviado"><! [CDATA[ <span id="j_idt119:textoEnviado">Hello uaiHebert .com! </span>] ]></update> 
Element update for id=j_idt126:j_idt146 

<update id="j_idt126:]_idt146"><![CDATA[ <span id="j_idt126:j_idt146"></span>] ]></update> 

Element update for id=javax. faces. ViewState 

<update id="javax. faces. ViewState"><! [ CDATA[ 6468675042501982684: - 8890102201139837965] ]></update> 

Element extension 

<extension aceCallbackParam="validationFailed">{"validationFailed": false}</extension> 

info [14:21:36.142]: Received 'success' event from <input id=j_idt119:j_idt121 ...> 

info [14:21:36.144]: Received 'complete' event from <input id=j_idt119:j_idt121 ...> 


Figura 24.8: Log de chamadas Ajax 


Note que são exibidas as informações relacionadas à chamada Ajax. É possível 
também realizar chamadas com outros níveis de Log (ver nível debug 24.9). 


Log 


uaiHebert.com Enviar 
Hello uaiHebert.com! 


Clear | debug Y 


debug[14:23:48.087]: New request added to queue. Queue requestGroupingId changed to j_idt119:j_idt121 





debug[14:23:48.089]: Queue will wait Oms before submit 

debug[14:23:48.090]: richfaces.queue: will submit request NOW 

info [14:23:48.095]: Received 'begin' event from <input id=j_idt119:j_idt121 ...> 

info [14:23:48,131]: Received 'beforedomupdate' event from <input ii idt119:j_idt121 ...> 








debug[14 48.132]: Server returned responseText: <?xml version='1.0 <partial - response><changes><upd 
</span>] ]></update><update id="j_idt126:]_idt146"><![CDATA[ <span id="j_idt126:j_idt146"></span>] ]></update><update id="ja 
aceCallbackParam="validationFailed">{"validationFailed": false}</extension></changes></partial - response> 

info [14:23:48.134]: Listing content of response changes element: 

Element update for id=j_idt119:textoEnviado 

<update id="j_idt119:textoEnviado"><![CDATA[ <span id="j_idt119:textoEnviado">Hello uaiHebert .com! </span>] ] ></update> 
Element update for id=j_idt126:j_idt146 

<update id="j_idt126:j_1dt146"><![CDATA[ <span id="j_idt126:j_idt146"></span>] ] ></update> 

Element update for id=javax. faces. ViewState 

<update id="javax. faces. ViewState"><! [ CDATA[ -7778646331579789864: 372895511270174478] ] ></update> 

Element extension 

<extension aceCallbackParam="validationFailed">("validationFailed"; false}</extension> 

debug[ 14:23:48.138]: richfaces. queue: ajax submit successfull 

debug[14:23:48.138]: richfaces.queue: Nothing to submit 

info [14:23:48.139]: Received 'success' event from <input id=j_idt119:j_idt121 ...> 

info [14:23:48.139]: Received 'complete' event from <input id=j_idt119:j_idt121 ...> 


Figura 24.9: Log de chamadas Ajax com log em Debug 


E para utilizar esse recurso é necessário adicionar um simples componente à 
página: <a4j:log/>. Ele realizará todo o trabalho de colocar a chamada Ajax e exibir. 


O código da página exibida nas imagens pode ser encontrado abaixo. 


125 


24.4. Panel Menu Casa do Código 





<h: form> 
<h:inputText value="#{richfacesMB.nomeEnviado}"/> 
<a4j:commandButton value="#{mensagens.enviar}" 
render="textoEnviado"/> 
<br/> 
<a4j:outputPanel id="textoEnviado"> 
<h:outputText value="Hello #{richfacesMB.nomeEnviado}!" 
rendered="#{not empty richfacesMB.nomeEnviado}"/> 
</a4j :outputPanel> 
</h: form> 
<a4j:log/> 


24.4 PANEL MENU 


O Panel Menu é um componente que ajuda na organizacáo de material, e até 
mesmo facilita a navegacáo do usuário. Veja na imagem 24.10 como ele é visual- 
mente. 


Grupo 1 y 
Grupo 2 A 
Item 2.1 
Item 2.2 
Item 2.3 
Grupo 2.4 ` 
Item 2.4.1 
Item 2.4.2 


Item 2.4.3 


Item 2.5 


Grupo 3 y 


Figura 24.10: Panel Menu 


O interessante desse componente é que ele funciona como um agrupador de con- 
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teúdo, tem efeito Jquery ao se trocar de blocos de códigos e é possível integrar com 
chamadas Ajax. 


<rich:panelMenu itemMode="ajax" 
groupMode="ajax" 
groupExpandedLeftIcon="triangleUp" 
groupCollapsedLeftIcon="triangleDown" 
topGroupExpandedRightIcon="chevronUp" 
topGroupCollapsedRightIcon="chevronDown" 
itemLeftIcon="disc" 

itemChangeListener="#{richfacesMB.atualizarGrupoSelecionado}"> 


<rich:panelMenuGroup label="#{mensagens.richfacesGrupo} 1"> 
<rich:panelMenultem label="Item 1.1" name="Item_1_1"/> 
<rich:panelMenultem label="Item 1.2" name="Item_1_2"/> 
<rich:panelMenultem label="Item 1.3" name="Item_1_3"/> 
</rich: panelMenuGroup> 
<rich:panelMenuGroup label="#{mensagens.richfacesGrupo} 2"> 
<rich:panelMenultem label="Item 2.1" name="Item_2_1"/> 
<rich:panelMenultem label="Item 2.2" name="Item_2_2"/> 
<rich:panelMenultem label="Item 2.3" name="Item_2_3"/> 
<rich:panelMenuGroup label="#{mensagens.richfacesGrupo} 2.4"> 
<rich:panelMenultem label="Item 2.4.1" name="Item_2_4_1"/> 
<rich:panelMenultem label="Item 2.4.2" name="Item_2_4_2"/> 
<rich:panelMenultem label="Item 2.4.3" name="Item_2_4_3"/> 
</rich: panelMenuGroup> 
<rich:panelMenultem label="Item 2.5" name="Item_2_5"/> 
</rich: panelMenuGroup> 
<rich:panelMenuGroup label="#{mensagens.richfacesGrupo} 3"> 
<rich:panelMenultem label="Item 3.1" name="Item_3_1"/> 
<rich:panelMenultem label="Item 3.2" name="Item_3_2"/> 
<rich:panelMenultem label="Item 3.3" name="Item_3_3"/> 
</rich: panelMenuGroup> 
</rich: panelMenu> 


Osatributos itemMode="ajax" e groupMode="ajax" são configurações re- 
lacionadasao Ajax. itemChangeListener="#{richfacesMB.atualizarGrupoSelecior 
indica qual método será chamado via Ajax a cada mudança de item. 
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24.5 REPEAT 


Uma fungáo interessante do Richfaces é o componente que pode repetir outros com- 
ponentes. De certo modo funciona como um loop, mas com valores diferentes. 


<a4j:repeat value="#{richfacesMB.cidadesParaRepeat}" 
var="cidade" 
rows="20"> 
<rich:panel> 
<f:facet name="header"> 
<h:panelGroup> 
<h:outputText value="#{cidade.nome}" /> 
</h: panelGroup> 
</f:facet> 
<h:panelGrid columns="2"> 
<h:outputText value="#{mensagens.cidadeEstado}" /> 
<h:outputText value="#{cidade.estado}" /> 
<h:outputText value="#{mensagens.cidadeTotalHabitantes}" /> 
<h:outputText value="#{cidade.totalDeHabitacoes}" /> 
</h: panelGrid> 
</rich:panel> 
</a4j:repeat> 


O componente a4j:repeat receberä uma lista de objetos da classe Cidade 
e o atributo rows="20" define que serão repetidos 20 objetos por pagina. Veja a 


imagem 24.11 como esse componente € visualmente. 
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Repeat 


CIDADE 1 
Estado ESTADO_1 
Total de Habitantes O 
CIDADE 5 
Estado ESTADO_5 
Total de Habitantes 300 
CIDADE 9 
Estado ESTADO_9 
Total de Habitantes 600 
CIDADE 13 
Estado ESTADO_13 
Total de Habitantes 900 
CIDADE 17 


Estado ESTADO_17 
Total de Habitantes 1200 


CIDADE 2 
Estado ESTADO_2 
Total de Habitantes 75 
CIDADE 6 
Estado ESTADO_6 
Total de Habitantes 375 
CIDADE 10 
Estado ESTADO_10 
Total de Habitantes 675 
CIDADE 14 
Estado ESTADO_14 
Total de Habitantes 975 
CIDADE 18 


Estado ESTADO 18 
Total de Habitantes 1275 


CIDADE 3 
Estado ESTADO 3 
Total de Habitantes 150 
CIDADE 7 
Estado ESTADO 7 
Total de Habitantes 450 
CIDADE 11 
Estado ESTADO 11 
Total de Habitantes 750 
CIDADE 15 
Estado ESTADO 15 
Total de Habitantes 1050 
CIDADE 19 


Estado ESTADO 19 
Total de Habitantes 1350 


Figura 24.11: Repeat 


24.6 CONSIDERAÇÕES FINAIS 


Estado ESTADO 4 
Total de Habitantes 225 


CIDADE 8 
Estado ESTADO 8 
Total de Habitantes 525 
CIDADE 12 
Estado ESTADO 12 
Total de Habitantes 825 
CIDADE 16 
Estado ESTADO 16 


Total de Habitantes 1125 


Estado ESTADO 20 
Total de Habitantes 1425 


Existem diversos componentes hoje que ajudam o desenvolvedor com funcionalida- 


des e facilidades. 


Outra vantagem do Richfaces é que seu código do lado do servidor é considerado 


o mais robusto. Ele tem um excelente enfileiramento de chamadas Ajax, utiliza JMS 


para o componente a 45: push e ja implementa a validação através da JSR-303 (Bean 


Validation). 


Infelizmente o Richfaces tem um pequeno número de componentes, sua diversi- 


dade é baixa. Outra melhoria que poderia ser feita no Richfaces seria sua documen- 


tação que contivesse mais detalhes. 
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Icefaces 


Das bibliotecas citadas aqui, o Icefaces é o mais velho de todos, e um dos menos 
utilizados. 

Ele tem uma biblioteca com diversos componentes para ajudar tanto na 
parte visual como no server-side. Seu showcase pode ser acessado aqui: http:// 
icefaces-showcase.icesoft.org/showcase.jsf . 


25.1 MENU 


O Icefaces fornece um componente de Menu que permite chamadas Ajax, além de 
colocar imagens de modo atrativo ao usuário. 


25.1. Menu 


Casa do Código 





File 

A New 

A Open 

B Save N 
x Delete 
View 

a Horizontal 
A Vertical 

a Fill 

Links 

fi uaiHebert 
fi GUJ 


A Casa do Codigo 


Figura 25.1: Menu 


A imagem 25.1 mostra um menu que poderia ficar acessível a toda aplicação. Ele 


nao tem apenas um tipo de acóes, mas indica que pode haver tanto agöes específicas 
(salvar, incluir etc) como navegagöes. 


<ace:menu type="plain" id="exampleMenu" > 
<ace:submenu label="File" id="file"> 
<ace:menultem id="new" 
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<ace:ajax 


value="New" 
actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon"> 

event="activate" 

execute="@this" 


render="message" /> 


</ace:menultem> 


<ace:menultem 


id="open" 
value="0pen" 


actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon"> 
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<ace:ajax event="activate" 
execute="@this" 
render="message" /> 
</ace:menultem> 
<ace:menultem id="save" 
value="Save" 
actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon ui-icon-disk"> 
<ace:ajax event="activate" 
execute="@this" 
render="message" /> 
</ace:menultem> 
<ace:menultem id="delete" 
value="Delete" 
actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon ui-icon-close"> 
<ace:ajax event="activate" 
execute="@this" 
render="message" /> 
</ace :menultem> 
</ace: submenu> 


<ace:submenu id="view" label="View"> 
<ace:menultem id="horizontal" 
value="Horizontal" 
actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon"> 
<ace:ajax event="activate" 
execute="@this" 
render="message" /> 
</ace:menultem> 
<ace:menultem id="vertical" 
value="Vertical" 
actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon"> 
<ace:ajax event="activate" 
execute="@this" 
render="message" /> 
</ace:menultem> 
<ace:menultem id="fill" 
value="Fill" 
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<ace:ajax 


actionListener="#{icefacesMB.fireAction}" 
icon="ui-icon"> 

event="activate" 

execute="@this" 

render="message" /> 


</ace:menultem> 


</ace:submenu> 


<ace:submenu label="Links"> 


<ace:menultem 


<ace:menultem 


<ace:menultem 


</ace:submenu> 
</ace:menu> 


value="uaiHebert" 
url="http://uaihebert.com" 
target="_blank" 

icon="ui-icon ui-icon-home"/> 
value="GUJ" 
url="http://www.guj.com.br" 
target="_blank" 

icon="ui-icon ui-icon-home"/> 
value="Casa do Código" 
url="http://www.casadocodigo.com.br" 
target="_blank" 

icon="ui-icon ui-icon-home"/> 


O menu é composto de dois componentes ace:menue ace:submenu. Am- 


bos estão envolvendo uma tag chamada ace:ajax que executará uma ação Ajax 


quando cada item for selecionado. 


25.2 DIALOG 


O Icefaces tem um Dialog que é simples de montar e suas ações são fáceis de definir. 
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” Dialog Sim/Nao 


Save 


Figura 25.2: Dialog 
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+ Dialog Siminan 


Confirmation x 
_ Save | 


A Are you sure about this? 


_No | 





Figura 25.3: Dialog 


A imagem 25.2 e 25.3 mostra esse útil componente que, em geral, é utilizado para 
confirmar ações em muitas partes do sistema. 


<h:panelGrid styleClass="centeredPanelGrid" id="panelGridDialog"> 
<h:commandButton id="save" 
value="Save" 
onclick="confirmation.show()" 
type="button"/> 
<h:outputText id="outcome" 
value="#{icefacesMB.resultadoDialog}" 
rendered="#{icefacesMB.resultadoDialog != null}"/> 
</h:panelGrid> 


<h:form id="formConfirmDialog"> 
<ace:confirmationDialog id="confirmDialog" 
widgetVar="confirmation" 
message="Are you sure about this?" 
header="Confirmation" 
width="250" 
height="100" 
closable="true" 
position="center"> 
<h:panelGrid columns="2" styleClass="centeredPanelGrid"> 
<h:commandButton id="yes" value="Yes" 
onclick="confirmation.hide()" 
actionListener="#{icefacesMB.dialogSim}"/> 
<h:commandButton id="no" value="No" 
onclick="confirmation.hide()" 
actionListener="#{icefacesMB.dialogNao}"/> 
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25.3. RichText 


</h:panelGrid> 
</ace:confirmationDialog> 


</h:form> 


O componente ace:confirmationDialog é utilizado para exibir a confir- 


magäo. 


25.3 RICHTEXT 


Se necessärio simular um editor de texto, o Icefaces tem uma boa opgäo para agradar 


o usuärio. 
El Source HORM E Bam ar RE Mo 
M0 E E a as A 
BI Ud xx EE Ens Essas Mu. BAP 
BemZEso=s®e N 
=) Normal - Fi ási DA: A- @ fa | [2] aj 
body p ta 


Figura 25.4: RichText 


E para usar esse componente basta um código bastante simples. 


<ace:richTextEntry value="#{icefacesMB.richText}" 
skin="kama" 


toolbar="Default"/> 
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25.4 DATA 


Por diversas vezes criar um componente de data que seja agradável ao usuário é com- 
plicado. Diversos códigos de JavaScript e css existem no mercado para tentar fazer 
uma interface bonita. O Icefaces já tem um componente bastante simples de utilizar. 


Selecionar Data 
| 
E January 2013 O 
Su Mo Tu We Th Fr Sa 
A AI AI 3 _4| 5 
G 2) Bi li Di ¿VO (¿AA | 22 
13 14 15 16 17 18 19 
20 21 2 23 24 25 26 
27 29 30 31 


Figura 25.5: Componente de Data 


<ace:dateTimeEntry value="#{icefacesMB.data}" 
pattern="dd/MM/yyyy" 
renderAsPopup="true"/> 





richTextEntry é o componente utilizado para criar um editor de texto com 
diversas opções de formatação. A opção skin habilita escolher algum tema dispo- 
nível do Icefaces, e a opção toolbar permite escolher quais componentes estarão 
disponíveis para o usuário. 


[Resize] O Resize é um componente do Icefaces que permite ao usuário alterar o 
tamanho do componente na tela. 
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Resize com efeito após o redirecionamento apenas em um 
inputTextarea 


Panel com Resize 


Resize para todas as direcoes sem efeitos 
“especiais” 


Figura 25.6: Resize 


Na imagem 25.6 é possível ver que existe uma opção de Resize com muitas opções 
e uma opção de um Resize mais simples. 


<h: inputTextarea value="#{mensagens.icefacesResizeEfeito}"> 
<ace:resizable animate="true" 
ghost="true" 
effectDuration="slow" 
minHeight="50" 
minWidth="200" 
maxHeight="250" 
maxWidth="650"/> 
</h: inputTextarea> 
<ace:panel header="#{mensagens.icefacesResizePanel}"> 
<h:outputText value="#{mensagens.icefacesResizeGradual}" /> 
<ace:resizable handles="all" 
grid="20" 
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minHeight="160" 

minWidth="300" 

maxHeight="300" 

maxWidth="700"/> 
</ace:panel> 


Para utilizar o ace:resizable basta colocá-lo dentro de outro componente. 





As configuracóes minHeight, minWidth, maxHeight e maxWidth define con- 
figurações relacionadas ao tamanho mínimo e máximo de larguras (width) e alturas 
(height). A configuração animate indica para o Icefaces que uma animação deve 
ser utilizada; ghost="true" irá exibir um “helper” semitransparente durante o 
resize; effectDuration define a velocidade do efeito a ser executado. 


25.5 CONSIDERAÇÕES FINAIS 


O Icefaces tem a vantagem de usar uma abordagem chamada Direct-2-Dom. Ele 
mantém uma cópia do DOM exibido na página do usuário, quando este envia uma 
solicitação: ao invés de responder com uma página inteira, o Icefaces enviará apenas 
o que foi alterado como resposta. Ele verificará a diferença entre o DOM no servidor 
e o DOM do usuário para enviar apenas o necessário. Com essa tecnologia o tráfego 
de dados é menor. 

O Icefaces tem uma grande quantidade de documentação e exemplos pela inter- 
net. 


Seu maior defeito é a quantidade de problemas abertos em seu Jira sem correção. 





CÓPIA DESONESTA? OU SE É CÓDIGO LIVRE POSSO COPIAR? 


Um outro fato interessante foi que o Icefaces foi acusado de uma cópia 
do código fonte do Primefaces de modo desleal. http://blog.primefaces. 
org/?p=1692 No blog do Primefaces foi exibido um código que foi total- 
mente copiado, mas não foi dado o devido crédito a quem realmente o 
criou. Muita coisa aconteceu depois desse dia, e hoje o Icefaces reconhe- 
ceu que muito dos seus componentes foram baseados e “powered” pelo 
Primefaces. Isso só aconteceu depois que o criador do Primefaces fez 
uma reclamação. 
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CAPÍTULO 26 


Evite misturar as 
Implementações/Bibliotecas de 
Componentes 


É muito fácil encontrar em uma Implementação ou Biblioteca de Componente al- 
gum componente que nos agrade, mas esse componente pode náo existir na Imple- 
mentação/Biblioteca que é utilizada na aplicação em que trabalhamos. Imagine uma 
aplicacáo que utilize Mojarra com Icefaces, mas, para um novo requisito da aplica- 
ção, um componente existente no Richfaces seria perfeito. 

O problema é que cada Implementação/Biblioteca tem suas peculiaridades e suas 
próprias rotinas para funcionar. Por exemplo, o Primefaces criou seu processador de 
Ajax através da tag p:ajax. 

É possível encontrar na internet diversos relatos de problemas relacionados ao 
misturar o componente rich:calendar com p:toolTip. O Richfaces tem seu 
modo próprio de trabalhar, assim como o próprio Primefaces. É necessário entender 
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que cada Implementação/Biblioteca, apesar de ter sua base no JSF, não tem compa- 
tibilidade garantida com as outras. 





AVISO DO JBoss 


Ao executar uma aplicagäo no JBoss com o MyFaces a seguinte men- 
sagem é exibida: "WARN [JBossJSFConfigureListener] MyFaces JSF im- 
plementation found! This version of JBoss AS ships with the java.net imple- 
mentation of JSF. There are known issues when mixing JSF implementati- 
ons. This warning does not apply to MyFaces component libraries such as 
Tomahawk. However, myfaces-impl.jar and myfaces-api.jar should not be 
used without disabling the built-in JSF implementation.See the JBoss wiki 
for more details “ Note que o proprio JBoss avisa que o ideal seria apenas 
utilizar uma implementagäo, a que ele fornece. 
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Não faça paginação no lado do 
servidor 


Uma das grandes dificuldades do JSF é sobre como fazer paginacáo por demanda. 
Quando utilizamos o h:datatable é possivel ver que nao existe opcáo nativa de 
paginação, veja a imagem 27.1. 
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Id Nome Estado 
O CIDADE 0 ESTADO 0 
1 CIDADE 1 ESTADO 1 
2 CIDADE 2 ESTADO 2 
3 CIDADE 3 ESTADO 3 
4 CIDADE 4 ESTADO 4 
5 CIDADE 5 ESTADO 5 
6 CIDADE 6 ESTADO 6 
7 CIDADE 7 ESTADO 7 
8 CIDADE 8 ESTADO 8 
9 CIDADE 9 ESTADO 9 
10 CIDADE 10 ESTADO 10 
11 rTINANF 11 ECTANA 11 


Figura 27.1: Datatable do JSF 


Essa tabela conseguimos com o seguinte código: 


<!-- dataTable nativo do JSF --> 
<h:dataTable value="#{cidadesPaginadas.cidades}" 


var="cidade"> 
<h: column> 
<f:facet name="header"> 
#{mensagens.cidadeld} 
</f:facet> 
<h:outputText value="#{cidade.id}" /> 
</h: column> 
<h: column> 
<f:facet name="header"> 
#{mensagens.cidadeNome} 
</f:facet> 
<h:outputText value="#{cidade.nome}" /> 
</h:column> 
<h:column> 
<f:facet name="header"> 
#{mensagens.cidadeEstado} 
</f:facet> 
<h:outputText value="#{cidade.estado}" /> 
</h:column> 


</h:dataTable> 
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Infelizmente o dataTable do JSF nao é dos mais bonitos e nem práticos. Se 
você colocar uma coleção de 100000 itens para o dataTable, todos os itens serão 
exibidos. Dessa forma, além de você manter no mínimo 100000 objetos na memória, 
a renderização da tela demorará muito, pois a quantidade de informação que deverá 
ser mostrada é muito grande. Indo mais além, é ruim também para o usuário, já que 
a usabilidade ficará prejudicada. Como encontrar uma informação numa lista com 
outras 100000? É como encontrar uma agulha no palheiro. 

Existem diversas formas de fazer uma paginação dos dados em um dataTable, 
porém, vamos precisar da ajuda do Primefaces, que já possui toda a infra-estrutura 
necessária para facilitar nossa tarefa. 


Veja na imagem 27.2 como fica um DataTable paginado pelo Primefaces. 


(6 of 100) E ES FAETECIES Atl 

Id Nome Estado 
CIDADE 50 ESTADO 50 
CIDADE 51 ESTADO 51 
CIDADE_52 ESTADO 52 
CIDADE 53 ESTADO 53 
CIDADE 54 ESTADO 54 


CIDADE 55 ESTADO 55 
CIDADE 56 ESTADO 56 
CIDADE 57 ESTADO 57 
CIDADE 58 ESTADO 58 
CIDADE 59 ESTADO 59 

(601100) = ~ 123 4 5/6)7 89 10 





Figura 27.2: Datatable do Primefaces 


<!-- paginação nativa do primefaces --> 
<p:dataTable value="#{cidadesPaginadas.cidades}" 
var="cidade" 
paginator="true" 
rows="10" 
paginatorTemplate="{CurrentPageReport} {FirstPageLink} 
{PreviousPageLink} {PageLinks} 
{NextPageLink} {LastPageLink} 
{RowsPerPageDropdown}" 
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rowsPerPageTemplate="5,10,15" 
style="width: 40%"> 
<p: column> 
<f:facet name="header"> 
#{mensagens.cidadeld} 
</f:facet> 
<h:outputText value="#{cidade.id}" /> 
</p:column> 
<p: column> 
<f:facet name="header"> 
#{mensagens.cidadeNome} 
</f:facet> 
<h:outputText value="#{cidade.nome}" /> 
</p:column> 
<p:column> 
<f:facet name="header"> 
#{mensagens.cidadeEstado} 
</f:facet> 
<h:outputText value="#{cidade.estado}" /> 
</p:column> 
</p:dataTable> 


O proprio Primefaces cuida de nos oferecer de antemäo um layout agradävel para 
o dataTable. Note que o código € bem parecido com um dataTable nativo do 
JSF, e adicionamos poucas configurações do Primefaces relacionadas à paginação. 

Ao utilizar a Paginagäo nativa do Primefaces, toda a lista € alocada na sessäo do 
usuario. Caso uma consulta retornasse muitos objetos, facilmente poderia estourar 
a memoria do servidor. Temos nesse momento uma paginacáo que acontece apenas 
no lado do cliente. Ela melhora a usabilidade da aplicação, mas ainda onera o uso do 
servidor, mantendo objetos demais e possivelmente desnecessários na memória. 

Para evitar isso, pode-se usar a técnica chamada “paginação por demanda” (Lazy 
Pagination). É uma técnica bem simples que trabalha em cima da seguinte filosofia: 
“qual a razão de carregar objetos que o usuário pode nem chegar a ver?”. 

O princípio da paginação por demanda é simples: a cada clique para ir à pró- 
xima página do dataTable, uma nova consulta será feita no banco de dados bus- 
cando novos valores para exibir. A vantagem dessa técnica é que ao invés de trazer 
OS 100000 registros de uma só vez, virá do banco de dados apenas o que será exibido 
ao usuário. 


Veja na imagem 27.3 e 27.4 como ficará 0 DataTable com Paginação por De- 
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manda. 


(1 of 100)  BEBBORBDRE 





Nome > Estado 
a ey 

CIDADE_1 ESTADO_1 

CIDADE_2 ESTADO 2 

CIDADE_3 ESTADO_3 

CIDADE 4 ESTADO 4 

CIDADE 5 ESTADO 5 


CIDADE 6 ESTADO 6 
CIDADE 7 ESTADO 7 
CIDADE 8 ESTADO 8 
CIDADE 9 ESTADO 9 
CIDADE 10 ESTADO 10 


(1 of 100)  BBBBGRB00K 


ODN DN PWN BR 


pa 
o 


Figura 27.3: Datatable do Primefaces com LazyLoad 


(1 of 1) (1) 0) -| 


Nome Estado 


a 


CIDADE_945 ESTADO_945 
CIDADE_459 ESTADO_459 


(1 of 1) (ES) 108 





Figura 27.4: Datatable do Primefaces com LazyLoad 


<!-- paginação por demanda --> 
<hi: form> 
<p:dataTable value= 
var= paginator= rows= 
paginatorTemplate= 
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{RowsPerPageDropdown}" 
rowsPerPageTemplate="5,10,15" 
style="width: 40%" 
lazy="true"> 

<p:column sortBy="#{cidade.id}"> 
<f:facet name="header"> 
#{mensagens.cidadeld} 
</£:facet> 
<h:outputText value="#{cidade.id}"/> 
</p:column> 
<p:column sortBy="#{cidade.nome}" 
filterBy="#{cidade.nome}"> 
<f:facet name="header"> 
#{mensagens.cidadeNome} 
</£:facet> 
<h:outputText value="#{cidade.nome}"/> 
</p:column> 
<p:column sortBy="#{cidade.estado}" 
filterBy="#{cidade.estado}"> 
<f:facet name="header"> 
#{mensagens.cidadeEstado} 
</f:facet> 
<h:outputText value="#{cidade.estado}"/> 
</p:column> 
</p:dataTable> 
</h: form> 


Veja que o código da página é quase o mesmo, com um detalhe muito impor- 
tante. Precisamos informar que a paginacáo será feita de forma lazy, através do 
atributo lazy="true". Foram adicionadas no componente p:column os atri- 
butos sortBy para habilitar a ordenação e filterBy para indicar o filtro. Toda 
coluna que utilizar o sortBy enviará esse valor na hora em que for alterado. Esse 
parámetro funciona do modo Lazy e do modo normal. filterBy fará o filtro do 
campo assim que seu valor for alterado. Essa opgáo também funciona tanto com 
Filtro Lazy como do modo normal. 

Uma outra diferenga está no atributo value. Agora indicamos o valor 
#{cidadesPaginadas.cidadesLazy}. Precisamos de algumas mudanças no 
nosso ManagedBean. Quem é esse cidadesLazy? 


@ManagedBean 
@ViewScoped 


148 


Casa do Código Capítulo 27. Não faça paginação no lado do servidor 





public class CidadesPaginadasMB implements Serializable 4 
private List<Cidade> cidades; 


private LazyDataModel<Cidade> cidadesLazy; 


public List<Cidade> getCidades() { 
if(cidades == null){ 
CidadeDAO cidadeDAO = AbstractManagedBean.getCidadeDADO ; 
cidades = cidadeDAO.listAl1(); 


return cidades; 


public void setCidades (List<Cidade> cidades) { 
this.cidades = cidades; 


public LazyDataModel<Cidade> getCidadesLazy() { 
if (cidadesLazy == null){ 
cidadesLazy = new CidadeLazyList() ; 


return cidadesLazy; 


public void setCidadesLazy (LazyDataModel<Cidade> cidadesLazy) { 
this.cidadesLazy = cidadesLazy; 


Veja que o código da classe CidadesPaginadasMB sofreu algumas altera- 
ções. Agora cidadesLazy é apenas um atributo de uma classe abstrata chamada 
LazyDataModel. cidadesLazy tem apenas um new em seu get, o que indica 
que todo o funcionamento da paginação por demanda foi delegado para a classe 
CidadesLazyList. 


public class CidadeLazyList extends LazyDataModel<Cidade> { 


private List<Cidade> cidades; 
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@Override 


public List<Cidade> load(int posicaoPrimeiraLinha, 


int maximoPorPagina, 

String ordernarPeloCampo, 
SortOrder ordernarAscOuDesc, 
Map<String, String> filtros) { 


String ordenacao = ordernarAscOuDesc.toString() ; 


if (SortOrder . UNSORTED. equals (ordernarAscOuDesc) ){ 
ordenacao = SortOrder. ASCENDING.toString(); 


cidades = getDAQ() .buscaPorPaginacao (posicaoPrimeiraLinha, 
maximoPorPagina, 
ordernarPeloCampo, 
ordenacao, filtros); 


// total encontrado no banco de dados, 
// caso o filtro esteja preenchido dispara a consulta novamente 
if (getRowCount() <= 0 || 
(filtros != null && !filtros.isEmpty())) { 
setRowCount (getDA0() .countA11 (filtros)); 


// quantidade a ser exibida em cada página 
setPageSize(maximoPorPagina) ; 


return cidades; 


private CidadeDAO getDAO() { 


return AbstractManagedBean. getCidadeDAO() ; 


@Override 
public Cidade getRowData(String rowKey) { 


for (Cidade cidade : cidades) { 
if (rowKey. equals (String. valueOf (cidade.getId()))) 
return cidade; 
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} 

return null; 
} 
@Override 


public Object getRowKey(Cidade cidade) { 
return cidade. getId(); 


@Override 
public void setRowIndex(int rowIndex) { 
// solugäo para evitar ArithmeticException 


if (rowIndex == -1 || getPageSize() == 0) { 
super.setRowIndex(-1); 

J 

else 


super.setRowIndex(rowIndex % getPageSize()); 


A classe CidadeLazyList apresenta diversos metodos e configuragöes, que 
veremos uma a uma. O método public List<Cidade> loadrecebe como atri- 
buto todos os parámetros necessários para se fazer uma consulta. 


int posicaoPrimeiraLinha indica de qual linha do banco de dados a pes- 





quisa deverá iniciar. Dessa forma, caso seu valor seja 10, a pesquisa iniciará a partir 
do décimo registro que a consulta devolver do banco de dados. 

int maximoPorPagina indica a quantidade a ser exibida em cada página. 
Caso esse valor esteja definido como 20, a cada query disparada no banco de da- 
dos apenas 20 resultados deveráo ser utilizados. 

String ordernarPeloCampo indica em qual campo será ordenada a pes- 
quisa. 

SortOrder ordernarAscOuDesc é um Enum do proprio Primefaces que de- 
monstra se é para ordenar ASCENDING (crescente), DESCENDING (decrescente) 
ou se é UNSORTED (sem ordenação). 


String ordenacao = ordernarAscOuDesc.toString() ; 


if (SortOrder.UNSORTED.equals(ordernarAscOuDesc)) { 
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ordenacao = SortOrder.ASCENDING.toString() ; 


} 

cidades = getDAO() .buscaPorPaginacao(posicaoPrimeiraLinha, 
maximoPorPagina, 
ordernarPeloCampo, 


ordenacao, filtros); 


O DAO realizará a pesquisa no banco de dados e trará toda a informagäo neces- 
sária. Mais adiante veremos o DAO. 


// total encontrado no banco de dados, 
// caso o filtro esteja preenchido dispara a consulta novamente 
if (getRowCount() <= 0 || 

(filtros != null && !filtros.isEmpty())) { 

setRowCount (getDAO().countAll(filtros)); 


Informa ao DataTable a quantidade de registros no banco de dados no total. 
Caso o filtro seja alterado, a consulta deve ser refeita. Caso o filtro náo seja alterado, 
a consulta será disparada apenas uma vez. 


// quantidade a ser exibida em cada página 
setPageSize(maximoPorPagina) ; 


Informa ao DataTable a quantidade de registros a ser exibido por página. 


@Override 
public Cidade getRowData(String rowKey) { 
for (Cidade cidade : cidades) { 
if (rowKey.equals(String.value0f (cidade.getId()))) 
return cidade; 


return null; 


@Override 
public Object getRowKey(Cidade cidade) { 
return cidade.getId(); 
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@Override 
public void setRowIndex(int rowIndex) { 
// solugäo para evitar ArithmeticException 
if (rowIndex == -1 || getPageSize() == 0) { 
super.setRowIndex(-1); 
} 
else 
super .setRowIndex (rowIndex % getPageSize()); 


Os métodos setRowIndex, getRowKey e getRowData são utilizados 





quando alguma linha do DataTable é selecionada. Caso um DataTable seja 
utilizado sem paginacáo por demanda, esses métodos náo sáo necessários. Eles ape- 
nas indicam qual a linha selecionada, o objeto que se encontra na linha e qual o ID 
do objeto da linha determinada. 

E interessante notar que a classe CidadeLazyList estende da classe 
org.primefaces.model.LazyDataModel, e por consequéncia, acaba her- 
dando diversos métodos que já estáo implementados. É uma prática comum: um 
dos seus mais famosos exemplos é quando se cria um Servlet e a classe estendida éa 
HttpServlet. 

Nos métodos do DAO, é sempre importante usar os recursos do seu banco de 
dados para buscar apenas as informações que deverão ser exibidas. No MySQL, por 
exemplo, é possível usar a instrução limit, que devolverá apenas uma determinada 
faixa de resultados. 
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Parte V 


Funcionalidades ricas com JSF, 
seguranca e otimizacao do JSF 


O JSF por si só nos traz alguns recursos que permitem enriquecer as aplicações 
que desenvolvemos. Vimos que as bibliotecas de componentes potencializam ainda 
mais a criação de funcionalidades avançadas. Mas será que sempre precisamos delas? 
E quando precisarmos, como podemos implementá-las? 


CAPITULO 28 


Facilitando o uso do Ajax 


O Ajax é uma técnica que, entre outras coisas, permite atualizar parte de uma tela 
sem precisar recarregar toda a tela para o usuário. Apesar de poder ser conside- 
rado relativamente simples de se implementar, é importante manter alguns cuidados 
para que náo se caia em algumas armadilhas, tanto do ponto de vista da usabilidade, 
quanto do desenvolvimento. 

Nada melhor do que um exemplo clássico de Ajax, que pode ser visto nas ima- 
gens 28.1, 28.8 e 28.3: 


Selecione um Estado: Selecione uma Cidade: Bairro: 
[Escohaum Y) /Escomaum Y || Escolta um , 
MG 

ES ` 

RJ 





Figura 28.1: Utilizando Ajax para selectOne 
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Selecione um Estado: Selecione uma Cidade: Bairro: 
MG v 








Figura 28.2: Utilizando Ajax para selectOne 


Selecione um Estado: Selecione uma Cidade: Bairro: 
MG * || Goverandor Valadares v 





Escolha um 
Bairro de Lourdes 

Carapina 
Vila Bretas 












Figura 28.3: Utilizando Ajax para selectOne 


Note que é necessário selecionar um Estado, para depois selecionar uma cidade 
e finalmente um bairro. Mas carregar todos esses objetos em memória pode ser um 
problema dependendo da quantidade de objetos retornados. Salvar todas opções 
escondidas na tela e utilizar JavaScript é outra opção, mas caso a quantidade de re- 
gistros seja muito grande, o usuário levará mais tempo para carregar os valores. 

A solução mais prática é utilizar Ajax, que felizmente já vem nativo no JSF 2.0. 
No JSF 1.x era necessário recorrer a alguma biblioteca de componentes para conse- 
guir usar requisições assíncronas, enquanto que a partir do JSF 2, basta utilizar a tag 


f:ajax. 


<h: form> 
<h:panelGrid columns="3"> 
<h:outputText value="#{mensagens.ajaxSelecioneEstado}: "/> 
<h:outputText value="#{mensagens.ajaxSelecioneCidade}: "/> 
<h:outputText value="#{mensagens.ajaxBairro}: " /> 
<h:selectOneMenu value="#{ajaxMB.estadoSelecionado}"> 
<f:selectItem itemLabel="#{mensagens.ajaxSelecione}" 
itemValue=""/> 
<f:selectItems value="#{ajaxMB.estados}"/> 
<f:ajax execute="@this" 
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render="selectCidade selectBairro" 
listener="#{ajaxMB.alterarEstado}" /> 
</h:selectOneMenu> 
<h:selectOneMenu id="selectCidade" 
value="#{ajaxMB.cidadeSelecionada}"> 
<f:selectItem itemLabel="#{mensagens.ajaxSelecione}" 
itemValue=""/> 
<f:selectItems value="#{ajaxMB.cidades}"/> 
<f:ajax execute="@this" 
render="selectBairro" 
listener="#{ajaxMB.alterarCidade}" /> 
</h:selectOneMenu> 
<h:selectOneMenu id="selectBairro" 
value="#{ajaxMB.bairroSelecionado}"> 
<f:selectItem itemLabel="#{mensagens.ajaxSelecione}" 
itemValue=""/> 
<f:selectItems value="#{ajaxMB.bairros}"/> 
</h:selectOneMenu> 
</h:panelGrid> 
</h:form> 


O componente f:ajax € responsävel por executar a chamada assincrona. 
Toda vez que o selectOne for alterado, ele irá enviar o valor definido em 
execute="@this", nesse caso o @this significa o componente atual e que nesse 
caso é o selectOne que está envolvendo o f:ajax. 

O atributo render indica quais componentes serão atualizados quando a res- 
posta da requisição assincrona for devolvida. No selectOne do Estado, indica- 
mos selectCidade selectBairro como tendo que sofrer atualização. Ou seja, 
quando o Estado for selecionado, os campos de cidade e de bairro serão recarrega- 
dos, para mostrar as informações condizentes com a escolha do usuário. A imagem 
28.4 mostra como funciona uma requisição Ajax. 
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Selecione um Estado: 
MG 


1- Envia apenas o valor selecionado no select, 
SS pois o atributo execute estava com o valor @this. 


A | 
Servidor 
ajax.xhtml 





/7 2-Uma resposta é 


PR enviada do servidor. 
a 


Escolha um F 3 - Como a tag f:ajax estava com o 
bo AS atributo update="selectCidade" uma 
\ atualizacáo nesse componene 
SA será realizada. 


ajax.xhtml Servidor 





4 - Novos valores são enviados pelo 
, servidor. 


Selecione uma Cidade: 











ajax.xhtml 


Figura 28.4: Requisição Ajax 


O ManagedBean apenas recebe o valor selecionado em um selectOne para 
decidir qual o valor a ser exibido no próximo. 


28.1 SEMPRE INDIQUE QUE A REQUISIÇÃO ESTÁ ACONTE- 
CENDO 


Devido ao fato de a requisicäo Ajax ser feita de forma assincrona, em alguns mo- 
mentos pode náo haver a certeza de que algo está acontecendo ou sendo processado 
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e com isso, o usuário da aplicação pode ter uma reação que não seja a adequada, 
e por exemplo, realizar repetidas vezes a agäo, até que algo acontega, dessa forma, 
enfileirando varias requisigöes. 

Uma boa prática € sempre indicar que uma agäo está sendo executada, seja atra- 
vés de uma imagem ou uma animacao. 

Uma solução interessante é apresentada pelo Primefaces (também presente em 
outras bibliotecas): o componente chamado p:ajaxStatus. 


<p:ajaxStatus onstart="statusDialog.show();" 
onsuccess="statusDialog.hide() ;"/> 


<p:dialog modal="true" widgetVar="statusDialog" header="Status" 
draggable="false" closable="false"> 
<p:graphicImage library="gifs" name="ajaxloadingbar.gif" /> 
</p:dialog> 


O componente p:ajaxStatus automaticamente detectará que uma chamada 
Ajax foi iniciada e exibirá um dialog para o usuário. Ao final do processamento Ajax 
o componente fechará o dialog automaticamente, como demonstrado na imagem a 


seguir. 


Figura 28.5: Feedback de agäo iniciada 


28.2 DÉ MENSAGENS DE FEEDBACK PARA O USUÁRIO 


Sempre dé o feedback do que está acontecendo para o usuário. Uma forma alterna- 
tiva a imagem é usar simples mensagens que indiquem ao usuario o que está acon- 
tecendo. Toda vez que uma ação é executada, o usuário naturalmente espera por 
um resultado, mas como ele vai saber se algo aconteceu e o qué, sem que nenhuma 
mensagem indique para ele? O componente Growl explicado no capítulo sobre Pri- 
mefaces (??) mostra como ele funciona. 


161 


28.3. Previna-se das varias agöes do usuario em requisigóes assincronas Casa do Código 





28.3 PREVINA-SE DAS VÁRIAS AÇÕES DO USUÁRIO EM RE- 
QUISICOES ASSÍNCRONAS 


Caso a ação disparada demore mais do que o esperado para finalizar e o usuário 
dependa do resultado dessa execução para continuar alguma ação, podemos mostrar 
para ele uma mensagem indicando a demora do processamento. 

Na maioria das vezes, é necessário desabilitar o botão, pois o usuário incansavel- 
mente apertará o mesmo botão milhares de vezes. Para fazer isso teremos que usar 
um pequeno código jQuery. 


<h:form> 
<h:commandButton value="#{mensagens.ajaxBotaoTravado}"> 
<f:ajax execute="0form" 
render="@form" 
listener="#{ajaxMB.chamadaAjax}" 
onevent="desabilitarBotao" /> 
</h:commandButton> 
</h:form> 
<script type="text/javascript"> 
function desabilitarBotao(evento) { 
var botao = evento.source; 
var statusAjax = evento.status; 


switch (statusAjax) { 
case "begin": 
botao.disabled = true; 
break; 


case "complete": 
break; 


case "success": 
botao.disabled = false; 
break; 


} 


</script> 


Através da função desabilitarBotao o botão será desabilitado ao iniciar a 
chamada ajax, e ao final da chamada será habilitado novamente. As imagens a seguir 
mostram como ficará esse botáo. 
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Serei desabilitado durante a chamada Ajax 





Figura 28.6: Desabilitando botáo 


Figura 28.7: Desabilitando botáo 


28.4 CUIDADO AO USAR MANAGEDBEANS REQUESTSCO- 
PED COM AJAX 
Quando usamos requisições Ajax, precisamos tomar alguns cuidados com os Ma- 


nagedBeans RequestScoped. Veja o exemplo da imagem 28.8, onde temos um 
cenário clássico de uso de requisigöes assincronas. 


Selecione um Estado: Selecione uma Cidade: Bairro: 
MG v 








Figura 28.8: Utilizando Ajax para selectOne 


Na imagem 28.8 é possível ver um exemplo no qual quando cada selectOne 
for atualizado, um outro selectOne será populado. 
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Note que uma chamada Ajax a um ManagedBean do tipo RequestScoped sem- 
pre precisa enviar os dados necessários para o processamento, já que o ManagedBean 
nao guardará as informações entre as diferentes requisições. Nesse caso, seria neces- 
sário enviar o Estado selecionado para habilitar o selectOne de Cidades. Ao 
escolher uma Cidade seria necessário enviar novamente Estado e Cidade para 








poder calcular os valores do selectOne de Bairros. 

Note que, com escopo de request, poderá funcionar sem problemas, mas a 
desvantagem é esse trabalho de enviar todos os valores necessários a cada cha- 
mada. Poderíamos evitar essa necessidade através de um bean ViewScoped ou 


ConversationScoped. 
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CAPITULO 29 


Internacionalizacáo e Localizacáo 
da sua aplicacáo 


Muitas vezes, desenvolvemos aplicagöes que seráo utilizadas por pessoas de varios 
lugares do mundo, com diversas características culturais, sendo uma das mais mar- 
cantes o idioma. Dessa maneira, o ideal € que nossa aplicagäo se adapte as diferentes 
necessidades de locais distintos. Para isso, precisamos que haja algum tipo de su- 
porte do framework para adaptarmos a aplicação a essas necessidades. Isso é o que 
chamamos de internacionalização. 

O JSF provê internacionalização para nós através de simples configurações e ar- 
quivos .properties, que conterão todas as mensagens do sistema. A tradução das 
diversas mensagens para diferentes idiomas, adaptação de sinais monetários, abre- 
viações e vários outros recursos são conhecidos como localização. 

Para começarmos a adaptar a aplicação, vamos colocar os arquivos com as men- 
sagens. A imagem 29.1 mostra como ficaria o arquivo utilizando a IDE Eclipse. 
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4 (E src 
E3 com.model 
bundle_en.properties 
bundle_pt.properties | 


Figura 29.1: Arquivos com mensagens do sistema no Eclipse 


Dentro desses arquivos podemos ter as mensagens, junto de suas respectivas cha- 
ves identificadoras: 


# arquivo bundle_pt.properties 
bemVindo=Seja Bem Vindo 
index=Pagina Principal 


# arquivo bundle_en.properties 
bemVindo=You are welcome 
index=Welcome Page 


O próximo passo é configurar a existéncia dos arquivos da internacionalizagäo 
para o JSF. Podemos fazer isso através do faces-config.xml, no qual adiciona- 
mos a tag locale-config para indicar qual será o idioma padráo, que em nosso 
caso será pt, indicando o portugués. Definimos também o nome arquivo com os idi- 
omas, que chamamos de bundle. Com isso, teremos para cada idioma um arquivo 
bundle_xx.properties, onde podemos substituir xx pelo código do idioma. 

Vamos definir também uma variável chamada mensagens, que é configurada 
também no arquivo faces-config.xml. 


<application> 
<locale-config> 
<default-locale>pt</default-locale> 
</locale-config> 
<resource-bundle> 
<base-name>bundle</base-name> 
<var>mensagens</var> 
</resource-bundle> 
</application> 


E possivel especificar ainda melhor qual a linguagem do arquivo se seu nome for 
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bundle_pt_BRe o mesmo pode ser aplicado para as outras linguagens. Nesse caso, 
estamos indicando a variação do portugués a ser usado, no caso, o do Brasil. 

Outro comportamento importante de se prestar atencáo é que, caso o usuário 
esteja em uma linguagem que náo definida no sistema, o JSF escolherá a linguagem 





padráo, definida na tag default-local 


29.1 PERMITA QUE O USUÁRIO MUDE O IDIOMA 


Sempre que o usuário acessar a aplicação, um idioma será escolhido para que o con- 
teúdo seja mostrado. Não necessariamente a língua padrão será a que o usuário 
gostaria. Por isso, precisamos permitir que ele escolha a que preferir. 

Com pequenos ajustes na aplicação, é possível fazer com que a linguagem seja 
escolhida pelo usuário. Primeiro, é necessário criar uma opção para usuário seleci- 
onar qual o idioma desejado. Podemos fazer através de um selectOneMenu ou 
então, disponibilizando bandeirinhas das línguas disponíveis, que, quando clicadas, 
muda para o idioma adequado. 


<h:outputText value="#{mensagens.internacionalizacaoTexto}:" /> 
<h: form> 
<h:selectOneMenu value="#{usuarioMB.linguaEscolhida}"> 
<f:selectltem itemValue="pt" 
itemLabel="#{mensagens. internacionalizacaoPT}"/> 
<f:selectItem itemValue="en" 
itemLabel="#{mensagens. internacionalizacaoEN}"/> 
</h:selectOneMenu> 
<h:commandButton action="#{usuarioMB.alterarIdioma}" 
value="#{mensagens.internacionalizacaoTrocar}" /> 
</h:form> 


É possível notar que o selectOneMenu aponta para um ManagedBean que 
define qual a linguagem a ser selecionada. E existe uma action, chamada 
alterarIdioma, que fara todo o trabalho para nós. 


@ManagedBean 

@SessionScoped 

public class UsuarioMB implements Serializable { 
private String linguaEscolhida = "pt"; 
private Locale locale; 


167 


29.1. Permita que o usuário mude o idioma Casa do Código 





public String alterarIdioma() { 
locale = new Locale(linguaEscolhida) ; 
FacesContext instance = FacesContext.getCurrentInstance() ; 
instance. getViewRoot () .setLocale(locale) ; 
return null; 


public Locale getLocale() { 
if(locale == null){ 
locale = new Locale(linguaEscolhida) ; 


return locale; 


// getters e setters necessarios 


Note que o ManagedBean UsuarioMB tem os atributos para informar qual 
o Locale atual e uma String que contém uma língua padrão e que é utilizada 
no selectOne. Dentro do método alterarIdioma, a chamada para o método 
setLocale é feita, passando como parâmetro o idioma Locale que o usuário es- 
colheu. 

Uma outra opgäo € envolver um pedaco de um texto por uma linguagem qual- 
quer. Caso em um ponto específico da página seja necessário ter outra lingua, basta 
utilizar o atributo Locale do componente £:view. 


<f:view locale="#{usuarioMB.locale}"> 
<!-- códigos do sistema aqui--> 
</£:view> 
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BoA PRÁTICA 


Tenha em mente que colocar todo o texto da sua aplicação em arqui- 
vos é uma boa prática mesmo que tenha apenas um idioma. 

Pode-se considerar a internacionalizacäo como boa prática pelos se- 
guintes fatos: 


e Facilita a alteração de textos. Caso seja necessário trocar a pala- 
vra de Carro para Automóvel, todos os textos se encontram em 
um arquivo apenas. Não será necessário entrar em cada página do 
sistema. 


e Caso após um deploy se perceba que existe uma mensagem errada, 
bastaria alterar o arquivo de propriedades. Não seria necessário 
editar as páginas do sistema. 


e Se fosse necessário criar uma nova linguagem para o sistema, bas- 
taria traduzir o arquivo. Não seria necessária alteração em todas 
as páginas. 











Para finalizar esse assunto, é possível sobrescrever as mensagens default do JSF. 
Caso um campo esteja marcado como required=t rue uma mensagem em inglês 
aparecerá: ValidationError: Value is required. Para um sistema em português, essa 
mensagem pode ser bastante desconfortável para o usuário. 

Para alterar as mensagens padrões do JSE basta adi- 
cionar a seguinte configuração ao faces-config.xml: 








<message-bundle>bundle</message-bundle>. Com essa configuração 
o JSF procurará no arquivo de bundle pelas chaves utilizadas pelo JSF. 


<application> 
<locale-config> 
<default-locale>pt</default-locale> 
</locale-config> 
<resource-bundle> 
<base-name>bundle</base-name> 
<var>mensagens</var> 
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</resource-bundle> 

<!-- configuragäo adicionada --> 

<message-bundle>bundle</message-bundle> 
</application> 


# bundle_pt.properties 
javax.faces.component.UIInput.REQUIRED=Campo necessário náo preenchido 


# bundle_en.properties 
javax.faces.component.UIInput.REQUIRED=A required field is Empty 


Basta adicionar a linha com a chave de campo obrigatöria ao arquivo de men- 
sagens, no projeto do livro chamado de bundle, e pronto. O JSF identificara qual a 
lingua do usuario e procurará no respectivo arquivo de mensagens. 

Veja nas imagens 29.2 e 29.3 como ficará essa troca dinámica da lingua do sis- 


tema. 


Pagina Principal ie = 
Seja Bem Vindo 


Altere o tema da aplicação: 





Troque a linguagem padrão do sistema: 


Português [=] 


estilo.css 





Trocar 
+ Campo necessário não preenchido 
Altere o tema do primefaces: 


casablanca Aperte o botão enviar sem para ver a mensagem de erro, editada no arquivo bundie pt 


Enviar | 





Figura 29.2: Mensagens em Portugués 


Welcome Page E 
You are welcome 


Altere o tema da aplicação 


estilo css X Change the system Language: 
English y || Update | 














Trocar 
Press the Send button to see the error message, edited in the bundle_en file 


Altere o tema do primefaces: 


casablanca 
Figura 29.3: Mensagens em Inglês 
No projeto do livro algumas chaves foram traduzidas, por isso que, mesmo alte- 
rando para inglês, nem todas as palavras serão traduzidas. 
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Para utilizar os valores descritos no arquivo de propriedades basta utilizar 
#{mensagens.bemVindo}. O JSF ira escolher qual lingua utilizar de acordo com as 
configuracóes e o idioma do usuario. 
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CAPITULO 30 


Utilizando recursos dentro de um 
Converter 


Criar conversores é uma tarefa bastante recorrente em projetos JSF. No entanto, uma 
grande dificuldade é que até a versáo 2.1 do JSF nao era possivel trabalhar com injegáo 
de dependéncias dentro desses componentes. Dessa forma, tendemos a ter códigos 
complexos e de difícil manutenção dentro do Bean. Mas como podemos fazer pra 
mantermos nosso código limpo e elegante dentro dos conversores? 


30.1 ACESSE UM MANAGEDBEAN PROGRAMATICAMENTE 
ATRAVÉS DE EXPRESSION LANGUAGE 


Sempre que precisamos, nas páginas xhtml, temos acesso a diversos recursos atra- 
vés das Expression Languages. Seria interessante se de alguma maneira também ti- 
véssemos como acessá-los dentro dos conversores. E se houvesse uma possibilidade 
de usarmos a Expression Language de dentro do conversor? 
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@FacesConverter(value = "bairroConverter") 
public class BairroConverter implements Converter + 


@Override 
public Object getAsObject(FacesContext fc, UIComponent uic, 
String key) { 
FacesContext context = FacesContext.getCurrentInstance() ; 
ELContext elContext = context.getELContext (); 
ELResolver elResolver = elContext.getELResolver(); 


BairroMB bairroMB = (BairroMB) 
elResolver.getValue(elContext, null, "BairroMB"); 
return bairroMB.find(Integer.value0f (key) ); 


// outros métodos omitidos 


O código da classe BairroConverter mostra como buscar um ManagedBean 
e utilizá-lo para realizar as rotinas necessárias. Note que o método find do Mana- 
gedBean teria acesso ás classes injetadas. 

Ao utilizar essa abordagem, o ideal é ter uma classe para abstrair todos os passos 
necessários para se acessar um ManagedBean. 


// imports omitidos 
public class ManagedBeanLocator + 
public static AbstractMB find(String managedBean) { 
FacesContext context = FacesContext.getCurrentInstance() ; 
ELContext elContext = context.getELContext () ; 
ELResolver elResolver = elContext.getELResolver(); 
return (AbstractMB) elResolver.getValue(elContext, null, 
managedBean) ; 


E para utilizar o método bastaria fazer: 


BairroMB bairroCrudMB = (BairroMB) ManagedBeanLocator.find("BairroMB") ; 
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CDI com JSF 


A vantagem do CDI é injetar as dependéncias e utilizar aquele recurso sem que a 
classe tenha que se preocupar em instanciá-lo. 

Um bom exemplo seria utilizar o EntityManager do JPA dentro de um Mana- 
gedBean. 


OManagedBean (name="usuarioLoginMB") 

@SessionScoped 

public class UsuarioLoginMB implements Serializable { 
private String login; 
private String senha; 


@PersistenceUnit (unitName="meuPU") 
private EntityManagerFactory emFactory; 


@Resource 
private UserTransaction userTransaction; 
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public String login() { 
// 


No código do ManagedBean UsuarioLoginMB é possivel ver que temos inje- 





tado um EntityManagerFactory eum objeto do tipo UserTransaction. 
Note que o ManagedBean náo tem ideia de onde vieram essas duas instáncias, ele 
apenas utiliza esses objetos. A grande vantagem do CDI é que um desacoplamento 
é criado entre classes. Note que nao foi necessário passar configuracáo alguma rela- 
cionada ao arquivo persistence.xml. O próprio servidor localizou essas infor- 
mações e criou uma instancia do Entity ManagerFactory. 
É possível também injetar um EJB e outros recursos dentro de um Managed- 


Bean. 
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CAPITULO 32 


Evite o “Cross Site Scripting” em seu 
sistema 


Em um campo de texto de um formulário é possível que o usuario digite qualquer 
informação, mesmo não sendo a solicitada pelo campo. Por exemplo, em um campo 
cuja descrição é “Nome”, o usuário pode digitar a “Idade”, o seu “Endereço” ou qual- 
quer outra informação que ele queira. Sendo assim, já que nesse campo ele pode 
digitar qualquer informação que seja alfanumérica, o que o impede de preencher 
esse campo com um pequeno código JavaScript? Algo como: 


<script>alert('ola!');</script> 


Com essa informação digitada no campo, ela será cadastrada no banco de dados. 
Até aí, tudo bem. O problema acontece quando queremos mostrar o nome na tela. 


<h:outputText value="#{cliente.nome}" /> 


O conteúdo do nome, que no caso é o pequeno trecho de código JavaScript, será 
inserido dentro do HTML. Isso vai fazer com que durante a exibição da tela, a men- 
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sagem de alerta apareça, ou seja, o código JavaScript cadastrado pelo usuário será 
executado posteriormente. Quão perigoso isso pode ser? 

Muitos podem imaginar que isso é inofensivo, pois o usuário não vai digitar algo 
dessa natureza no campo. No entanto, essa brecha pode ser usada para um ataque 
poderoso, até mesmo para tirar o sistema do ar. Por exemplo, já que é possível intro- 
duzir código JavaScript que em algum momento futuro será executado, o que impede 
a pessoa de cadastrar um looping infinito que envia requisições assíncronas para a 
aplicação? Pronto, sua aplicação se tornou alvo de um ataque. 

Atacar aplicações através da injeção de código JavaScript é uma técnica chamada 
Cross Site Scripting. 

A solução para esse problema é extremamente simples. Para exibir as informa- 
ções, utilize a tag h:outputText. Ela já vem com um mecanismo de proteção, 
através do atributo escape. true já é o valor padrão utilizado, e ele fará com que 
um código Javascript seja apenas impresso, mas não executado. 

É uma solução extremamente simples que evita dores de cabeça com ataques a 
que muitos sistemas estão vulneráveis. 
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CAPITULO 33 


Otimizando a navegacáo e 
performance 


O JSF dispara seu ciclo de vida quando uma navegacáo é disparada utilizando 
h:commandLink eo h:commandButton. No entanto, quando apenas queremos 
trocar de página, sem disparar acáo alguma, náo precisamos que todo o ciclo seja 
executado. A saida para essa situagäo é utilizar o componente h:outputLink, que 
gera apenas um link convencional. 

Seu uso é extremamente simples, bastando indicar no atributo outcome qual é 


a página de destino: 
<h:outputLink outcome="pagina.xhtml" value="Pagina 01"/> 


A vantagem de utilizar o h: outputLink para navegação é que ele não dispara 
os ciclo de vida completo do JSF, tornando a navegação um processo mais leve. 


Parte VI 


Debug e inspecáo de aplicacóes 


Durante o desenvolvimento das aplicagöes, € comum inspecionarmos o que es- 
tamos fazendo através das mensagens de debug e comentários que deixamos pelo 
código. Mas como podemos fazer esse debug de uma maneira que náo polua nosso 
código ou atrapalhe a nossa aplicação? 

Nessa parte, vocé aprendera dicas de desenvolvimento e como resolver erros que 
comuns do dia a dia do desenvolvimento com JSF. 


CAPITULO 34 


Limpeza de comentarios e debug 


34.1 ESCONDA OS COMENTARIOS DA PÁGINA 


É comum desenvolvedores olharem o código fonte de sistemas e sites que nao foram 
feitos por eles. No entanto, geralmente ao abrir o código fonte de uma página, é 
possível encontrar comentários no HT'ML resultante, que além de poluir a saída, 
tornam a resposta mais pesada. 

Com o JSF, existe um modo simples de esconder todos os comentários que são 
colocados nos XHTML. Basta adicionar uma configuração no web.xml e os co- 
mentários náo seráo mais exibidos. 


<!-- adicionar ao web.xml --> 

<context-param> 
<param-name>javax.faces.FACELETS SKIP COMMENTS</param-name> 
<param-value>true</param-value> 

</context-param> 


É considerada boa prática esconder os comentários do código XHTML. Pri- 
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meiro, pelo fato de que comentários em HTML sáo enviados para o navegador, que 
o ignora, porém aumenta o tamanho do conteúdo da resposta a ser dada. E segundo, 
pois pessoas podem burlar de alguma maneira o sistema desenvolvido caso hajam 
comentários que exponham a existéncia de alguma falha na implementagáo. 

Um desenvolvedor poderia escrever <!-- corrigindo falha da data 
--> e a partir dessa mensagem, ele poderia descobrir qual falha é essa. Isso poderia 
acarretar em uma mensagem simples de erro, até falhas em pagamentos, prejuizo 
financeiro ou queda do servidor em casos mais extremos. 


34.2 DEBUG DOS COMPONENTES 


Muitas vezes fazemos manipulacóes na tela e perdemos o controle do que está ou náo 
está na árvore de componentes, por exemplo. Ou entáo qual é o estado dos compo- 
nentes e assim por diante. Para resolver essas e outras questões sobre a situação dos 
componentes, podemos utilizar a tag <ui:debug>. 


Para acessar os dados fornecidos pelo <ui:debug /> basta utilizar o atalho 
ctrl + shift + de uma tela como a mostrada nas imagens 34.1, 34.2 € 34.3 irá 
aparecer. 


A paginação por Demanda ou Lazy Pagination carregará apenas o que será exibi 
Desse modo será poupado a quantidade de registros trazidos do banco de dados. 
Se a consulta retornasse 150.000 registros, haveria um estouro de memória. Con 


(1 of 100) 32314151617 EU ap an 10N 
Id Nome Estado 

CIDADE O ESTADO O 

CIDADE 1 ESTADO 1 

CIDADE 2 ESTADO 2 

CIDADE 3 ESTADO 3 

CIDADE Debug - DO paras ata O DIS POSSE ENC PETE 
CIDADE_5 


CIDADE 6 


AUS Debug Output 
CIDADE 8 
CIDADE 9 | 'paginas/panesidataTablePaginacaoPorDemanda xhtml 






localhost 





oo 2 2 un pP WN PO 





(1 of 100) + Component Tree 


+ Scoped Variables 


Figura 34.1: Fungäo Debug do JSF 
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- Component Tree 


<UIViewRoot id="j_id1" inView="true" locale="pt" renderKitId="HTML BASIC" 
rendered="true" transient="false" viewId="/paginas/parte5 
/dataTablePaginacaoPorDemanda.xhtml"> 


javax_faces_location_HEAD 
<ComponentResourceContainer id="javax_faces_location_HEAD" inView="true" 
rendered="true" transient="false"> 


<UIOutput id="j idt4" inView="false" rendered="true" 
transient="false"/> 





| <uroutput inView="true" rendered="true" transient="false"/> 

| <uroutput inView="true" rendered="true" transient="false"/> 

| <routput inView="true" rendered="true" transient="false"/> 
| </componentResourceContainer> 
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm11/DTD/xhtml1- 
transitional.dtd"> 
| <ntmi xmins="http://www.w3.0rg/1999/xhtml"> 


| <uroutput id="j idt3" inView="true" rendered="true" transient="false"> 


<UIOutput id="j_idt5" inView="true" rendered="true" 
transient="false"/> 





| </UIOutput> 
| <uroutput id="j_idt6" inView="true" rendered="true" transient="false"> 


<UIDebug hotkey="D" id="j idt7" inView="true" rendered="true" 
transient="true"/> 





Figura 34.2: Função Debug do JSF 
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+ Component Tree 


- Scoped Variables 


Request Parameters 
Name Value 


None 


View Attributes 
Name Value 


cidadesPaginadas parte5.CidadesPaginadas@321b1228 


Request Attributes 
Name Value 


None 


Flash Attributes 


Name Value 


Figura 34.3: Função Debug do JSF 


Entre outras coisas, o debug é útil para resolver problemas de Ajax quando um 


update nao funciona. Outra situagäo onde o debug pode ser utilizado € para ver se 


os valores enviados por um ManagedBean estáo chegando a view. Apenas tenha o 


cuidado de colocar o <ui:debug /> ao final de sua página, caso contrário, ele dis- 


parará os getters e setters dos ManagedBean monitorados e assim poderá ocasionar 


comportamentos inesperados. 
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CAPITULO 35 


Organize funcionalidades por 
ambiente do projeto 


O JSF entende que cada projeto passa por estagios e cada um possui caracteristicas 
especificas que ajudam de diferente modos. 
Hoje no JSF sao possiveis encontrar os seguintes estagios: Development, 





UnitTest, SystemTest, Productione Extension 

Os estágios SystemTest e Unit Test permitem que ações sejam configuradas 
para serem executadas em um Listener. Caso algum dado, objeto ou configuração 
fossem necessários apenas para teste, bastaria configurar no web. xm1 qual o estágio 
atual da aplicação. 

O método configurarAmbiente mostra como o estágio poderia ser confi- 
gurado em um ManagedBean do tipo @ApplicationScoped. Desse modo, bastaria 
chamar o método para que a aplicação possa se comportar dependendo da configu- 
ração. 


public void configurarAmbiente() { 
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FacesContext facesContext = FacesContext.getCurrentInstance() ; 
Application application = facesContext.getApplication() ; 
ProjectStage projectStage = application. getProjectStage() ; 


if (projectStage.equals(ProjectStage.Development)) { 
// realiza ações de desenvolvimento 

} else if (projectStage.equals(ProjectStage.Production)) { 
// realiza ações de produção 

} else if (projectStage.equals (ProjectStage.SystemTest)) { 
// realiza ações de testes de sistema 

} else if (projectStage.equals(ProjectStage.UnitTest)) { 


// realiza agöes de testes de units 


Os estägios Development e Production säo os mais utilizados. 

E normal que ao se desenvolver com JSF erros estejam acontecendo e nenhuma 
mensagem seja exibida. As vezes säo erros simples que caso alguma mensagem fosse 
exibida rapidamente esses erros seriam resolvidos. 

Uma das vantagens do estägio Development é que o JSF adiciona automati- 
camente h:messages nas páginas para exibir mensagens de erro, o que é muito 
pratico. 

Já o estagio de Production (que é o valor padráo) tem uma característica 
oposta ao Development, ele esconde erros que poderiam ser exibidos ao usuário 
final. 

As implementações do JSF podem realizar ações para otimizar cada estágio es- 
colhido para o projeto. O MyFaces, por exemplo, no estágio Development faz o 
deploy dos arquivos de JavaScript separadamente. Já no estágio Production ele 
irá reduzir minificar o arquivo e compactar os vários arquivos, a fim de otimizar a 


performance da aplicação. 
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Para configurar o estágio da aplicação basta adicionar o parâmetro 





javax. faces.PROJECT STAGE no web.xml: 





<!-- web.xml --> 


<context-param> 
<param-name>javax.faces.PROJECT_STAGE</param-name> 


<param-value>Development</param-value> 


</context-param> 
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CAPITULO 36 


Refresh automatico dos Arquivos 


Em alguns momentos alterações são realizadas diretamente nas páginas do projeto 
(arquivo xhtml/jsp), mas não são refletidas no código. 

É possível informar o JSF que ele deve verificar se algum arquivo de um projeto 
foi alterado. Com isso o JSF irá atualizar o arquivo alterado no projeto em tempo de 
execução no servidor. 


Para ativar essa funcionalidade, basta adicionar a configuração 




















javax. faces.FACELETS REFRESH PERIOD no arquivo web.xml. 





<context-param> 
<param-name>javax.faces.FACELETS_REFRESH_PERIOD</param-name> 
<param-value>2</param-value> 

</context-param> 























O tempo da configuração javax.faces.FACELETS REFRESH PERIOD é 
tratada em segundos. 


